<html>
<head>
<style>
#cssSlider {
width: 800px;
height: 300px;
overflow: hidden;
border: 10px solid #666;
}
#sliderImages {
width : 4000px;
height: 300px;
overflow: hidden;
/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
animation: slide 16s infinite;
-moz-animation: slide 16s infinite;
-webkit-animation: slide 16s infinite;
-o-animation: slide 16s infinite;
}
#sliderImages img {
float: left;
}
@keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
97%{margin-left: -3200px;}
100%{margin-left: 0px;}
}
@-moz-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}
@-webkit-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}
@-o-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}
</style>
</head>
<body>
<div id="cssSlider">
<div id="sliderImages">
<img id="si_1" src="http://f.cybrox.eu/codepen/slider/slide1.jpg" alt="" />
<img id="si_2" src="http://f.cybrox.eu/codepen/slider/slide2.jpg" alt="" />
<img id="si_3" src="http://f.cybrox.eu/codepen/slider/slide3.jpg" alt="" />
<img id="si_4" src="http://f.cybrox.eu/codepen/slider/slide4.jpg" alt="" />
<img id="si_5" src="http://f.cybrox.eu/codepen/slider/slide5.jpg" alt="" />
<div style="clear:left;"></div>
</div>
</div>
</body>
</html>
slider building with only css code
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.