Author: | srekoble |
---|---|
Views Total: | 4,049 views |
Official Page: | Go to website |
Last Update: | April 29, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS/CSS3 solution to create an auto fading responsive slideshow from a list of images.
How to use it:
Create an image slider with 2 slides.
<div class="demo"> <ul class="slider-2"> <li><!-- slide 1 --></li> <li><!-- slide 2 --></li> </ul> </div>
Primary CSS styles for the image slider.
[class*="slider-"] { position:relative; width:100%; height:100% } [class*="slider-"] > li { position:absolute; height:100%; top:0; left:0; bottom:0; right:0 }
Add images into the slider using background-image
CSS property.
.slider-2 > li:nth-child(1) { background: url(1.jpg) center no-repeat; background-size: cover; -webkit-animation: slider-2-1 15s linear infinite; animation: slider-2-1 15s linear infinite } .slider-2 > li:nth-child(2) { background: url(2.jpg) center no-repeat; background-size: cover; -webkit-animation: slider-2-2 15s linear infinite; animation: slider-2-2 15s linear infinite }
Add the crossfade transition effect to the slider using CSS3 @keyframes.
@-webkit-keyframes slider-2-1 { 0% { opacity:1 } 45% { opacity:1 } 50% { opacity:0 } 95% { opacity:0 } 100% { opacity:1 } } @-webkit-keyframes slider-2-2 { 0% { opacity:0 } 45% { opacity:0 } 50% { opacity:1 } 95% { opacity:1 } 100% { opacity:0 } }