LilSlideshow

Works best with fixed images sizes.

by Pete Fecteau

HTML

<div class="slideshow">
    <ul>
        <li style="background-image:url('http://24.media.tumblr.com/8c712deb613bae2fa66f2820ac23c6e7/tumblr_n06ixn0k5V1s8zxqfo1_500.gif');">
            <span>Four adorable lil kitties.</span>
        </li>
        <li style="background-image:url('http://31.media.tumblr.com/515a0bebc8200b262f3b63dee98ae8d6/tumblr_mkkn7hlhxB1s3m0ajo1_500.gif');">
            <span>Sneaky kittie is sneaky</span>
        </li>
        <li style="background-image:url('https://24.media.tumblr.com/f4a7aa349a87499e95c9180e036a6c6a/tumblr_n1f1bnerTK1sv9hjzo1_500.gif');">
            <span>Kitties just gotta scratch sometimes</span>
        </li>
    </ul>
</div>

CSS

html, body {margin:0;padding:0;}
.slideshow {
    position:absolute;
    height:300px;
    width:500px;
    overflow:hidden;
    background:rgba(0,0,0,0.4);
}
.slideshow ul {
    display:block;
    list-style:none;
}
.slideshow ul li {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
}
.slideshow ul li span {
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:10px 20px;
    box-sizing: border-box;
    color:#FFF;
    font-size:14px;
    background-color:rgba(0,0,0,0.7);
}


/*--- ANIMATION PRESETS ---*/
@-webkit-keyframes fadein {
    0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes fadeout {
    0%{ opacity:1; }
	100%{ opacity:0; }
}
.slideshow ul li {
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both; 
}

JavaScript

function lilSlideshow(delay) {
    var $slides = $('.slideshow ul li');
    $slides.each(function(i) {
        if (i === 0){
            return;
        }
        var slideDelay = (i * delay) + 's';
        $(this).css({
            "animation-name":'fadein',
            "animation-delay": slideDelay
        }); 
    });
}

lilSlideshow(6);