html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
</head>
<body>
<div id="slider">
<figure>
<img src="https://www.dropbox.com/s/b2cv3vzc91hu3ky/html_certificate.jpg?raw=1" />
<img src="https://www.dropbox.com/s/mb3vt0u5wvx1j7o/css_certificate.jpg?raw=1" />
<img src="https://www.dropbox.com/s/1lffkud413bi17y/JavaScript_certificate.jpg?raw=1" />
<img src="https://www.dropbox.com/s/w1h9r0pv3ugdfum/jQuery_certificate.jpg?raw=1" />
<img src="https://www.dropbox.com/s/pkf86vtxclwjwmm/php_certificate.jpg?raw=1" />
</figure>
</div>
<P>THIS IS A SIMPLE SLIDESHOW THAT CONTAINS MY 5 CERTIFICATES </P>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {background: #888;}
/* slideshow */
@keyframes slideshow {
10% {left: 0;}
20% {left: 0;}
30% {left: -100%;}
40% {left: -100%;}
50% {left: -200%;}
60% {left: -200%;}
70% {left: -300%;}
80% {left: -300%;}
90% {left: -400%;}
100% {left: -400%}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:20s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 90%; margin: 0 auto;}}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run