slideshow.js

A simple jQuery slideshow script.

by Shobhit Sharma

HTML

<div class="container">
    <h1>Slideshow</h1>
    <ul class="slideshow">
        <li class="slideshow-item">
            <img src="http://placekitten.com/g/400/300" />
        </li>
        <li class="slideshow-item">
            <img src="http://placekitten.com/g/420/310" />
        </li>
        <li class="slideshow-item">
            <img src="http://placekitten.com/g/440/320" />
        </li>
    </ul>
</div>

CSS

/* Container */
 .container {
    margin: 0 auto;
    padding: 0 1.5em;
    max-width: 720px;
}
/* Images */
 img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
/* Slideshow */
 .slideshow {
    padding: 0;
    list-style: none;
    position: relative;
}
.slideshow-item {
    position: absolute;
}

JavaScript

function slideShow() {

    "use strict";

    var slideSpeed = 4000,
        fadeSpeed = 2000;

    $(".slideshow-item:gt(0)").hide();

    function slideAnimation() {

        $(".slideshow-item:first-child").fadeOut(fadeSpeed)
            .next(".slideshow-item").fadeIn(fadeSpeed)
            .end().appendTo(".slideshow");

    }

    setInterval(slideAnimation, slideSpeed);

}

$(document).ready(function () {

    "use strict";
    slideShow();

});