A jQuery Slideshow

Introduction

The code in this article presents a simple implementation of slideshow widget by jQuery.

Background

Although there are many slideshow widgets on the web, a custom slideshow built by hand is beneficial for learning web technologies such as HTML, CSS, JavaScript and jQuery.

Using the code

There are several ways to implement a slideshow. In this simple implementation, the images are contained in an unordered list in a row. To show an image, the left position of the list is adjusted. The effect uses jQuery css function to make it look like the image is slided to the show window. There is a row of image thumbnails under the show window. All images except the current image are dimmed to make the current image thumbnail stand out.

First, add the following HTML markup to a web page.

<div id="SlideContainer">
    <div id="SlideMain">
        <ul>
            <li><img src="../../Content/images/nature01.jpg" alt="Nature01" /></li>
            <li><img src="../../Content/images/nature02.jpg" alt="Nature02" /></li>
            <li><img src="../../Content/images/nature03.jpg" alt="Nature03" /></li>
            <li><img src="../../Content/images/nature04.jpg" alt="Nature04" /></li>
            <li><img src="../../Content/images/nature05.jpg" alt="Nature05" /></li>
            <li><img src="../../Content/images/nature06.jpg" alt="Nature06" /></li>
        </ul>
    </div>
    <div id="SlideThumbnails">
        <ul>
            <li><img src="../../Content/images/nature01.jpg" alt="Nature01" /></li>
            <li><img src="../../Content/images/nature02.jpg" alt="Nature02" /></li>
            <li><img src="../../Content/images/nature03.jpg" alt="Nature03" /></li>
            <li><img src="../../Content/images/nature04.jpg" alt="Nature04" /></li>
            <li><img src="../../Content/images/nature05.jpg" alt="Nature05" /></li>
            <li><img src="../../Content/images/nature06.jpg" alt="Nature06" /></li>
        </ul>
    </div>
</div>
<div id="SlideControls">
    <input type="button" id="btnPause" value="Pause" />&nbsp;&nbsp;
    <input type="button" id="btnResume" value="Resume" />
</div>

Second, add CSS code.

/* Slide show style */
#SlideContainer
{
    background-color: #E0E0E0;
    width: 600px;
    height: 420px;
}

/* Position is relative and its child element ul position is absolute. This makes ul position relative to its parent. */
#SlideMain
{
    width: 600px;
    height: 360px;
    overflow: hidden;
    position: relative;
}

#SlideMain ul
{
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    width: 3600px;
    height: 360px;
}

/* Each li size is 600 x 360 with margin 5. Each image size is 590 x 350. */
#SlideMain ul li
{
    display: block;
    list-style-type: none;
    float: left;
    width: 600px;
    height: 360px;
}

#SlideMain ul li img
{
    display: block;
    margin: 5px;
}

#SlideThumbnails
{
    width: 600px;
    height: 60px;
}

#SlideThumbnails ul
{
    margin: 0px;
    padding: 0px;
    width: 600px;
    height: 60px;
}

/* Each li size is 100 x 60 with margin 5. Each image size is 90 x 50. */
#SlideThumbnails ul li
{
    display: block;
    list-style-type: none;
    float: left;
    width: 100px;
    height: 60px;
    text-align: center;
}

#SlideThumbnails ul li img
{
    display: block;
    height: 50px;
    width: 90px;
    margin: 5px;
}

#SlideControls
{
    margin-top: 5px;
    padding: 5px;
}

Sometimes, CSS can be a bit tricky. For example, if position is absolute, the element is positioned relative to browser window. However, if the element's parent position is set to relative, its position is relative to its parent. The following link best explains the CSS positioning.

http://www.w3schools.com/css/css_positioning.asp

Another CSS trick is that HTML tag ul has default margin and padding. Sometimes, this causes unwanted spaces. So normally, it is better to reset ul margin and padding to 0.

Last, add some Javascript code to run the slide show.

<script src="../../Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript">
    // Define a slide widget object literal and encapsulate its properties and methods.
    var slideWidget = {
        // Current image position.
        currentPos: 0,
        pauseId: "btnPause",
        resumeId: "btnResume",
        // The ID value returned by JavaScript function setInterval.
        timer: 0,
        highlightThumbnail: function () {
            // Image thumbnails except the current one is half transparent. This effect makes the current image
            // thumbnail stand out.
            $('#SlideThumbnails ul li').css('opacity', '0.5');
            $('#SlideThumbnails ul li').css('filter', 'alpha(opacity=50)');
            $('#SlideThumbnails ul li:eq(' + slideWidget.currentPos + ')').css('opacity', '1');
            $('#SlideThumbnails ul li:eq(' + slideWidget.currentPos + ')').css('filter', 'alpha(opacity=100)');
        },
        slide: function () {
            // Move the slider to show current image. Use slide animation.
            slideWidget.currentPos += 1;
            if (slideWidget.currentPos == 6) {
                slideWidget.currentPos = 0;
                slideWidget.highlightThumbnail();
                $('#SlideMain ul').animate({ 'left': '0' }, 1000);
            }
            else {
                slideWidget.highlightThumbnail();
                $('#SlideMain ul').animate({ 'left': '-=600' }, 1000);
            }
        },
        init: function () {
            // Start the slide show.
            slideWidget.highlightThumbnail();
            slideWidget.timer = setInterval(slideWidget.slide, 3000);
            $('#' + slideWidget.pauseId).click(function () {
                // Pause slide show
                if (slideWidget.timer) {
                    clearInterval(slideWidget.timer);
                    slideWidget.timer = 0;
                }
            });
            $('#' + slideWidget.resumeId).click(function () {
                // Resume slide show.
                if (!slideWidget.timer) {
                    slideWidget.timer = setInterval(slideWidget.slide, 3000);
                }
            });
            $('#SlideThumbnails ul li img').click(function () {
                // Clicking an image thumbnail causes the selected image to show immediately.
                var index = $(this).parent().index();
                var leftOffset = index * (-600);
                slideWidget.currentPos = index;
                if (slideWidget.timer) {
                    $('#SlideMain ul').stop(true, true);
                }
                $('#SlideMain ul').css('left', leftOffset);
                slideWidget.highlightThumbnail();
            });
        }
    }

    $(document).ready(function () {
        slideWidget.init();
    });
</script>

A JavaScript object literal is used to encapsulate data the methods of the slide show widget. Native JavaScript function setInterval is used to set the timer. JavaScript function clearInterval is used to clear the timer. Since jQuery is a JavaScript library, JavaScript can be mixed with jQuery. The jQuery function animate is used to make sliding effect of the slide show.

Points of Interest

The core jQuery library provides functions to add impressive animation effects to web page!