How to Create a Simple jQuery Image Slider

In today’s tutorial, I’m going to show you how to create a simple jquery image slider. We’re going to create one, that uses the next and previous buttons to navigate between the images, and one that has a timer as well.

The slider we’re going to create, can have as many slide as you want, and you only need to add the image, without editing any code.

Also, you can use the jQuery animations like fadeIn and fadeOut and others, to animate the transition between two images.

[tutorial_details]

To get started, I recommend you first include the jquery library into your document’s header.:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Then we’re going to create the structure of the image slider. We’re going to have a container that contains the actual slider, the next and the previous buttons. Inside this, we’re going to create an unordered list with the id of “slider“.

Then inside that, we’re going to add a few list items, with the class of “slide“. And on the first item, we also add an other class called “selected” this will travel travel through each image when we click the next, and or previous buttons.

Our HTML looks like the following:

<div id="container">
    <ul id="slider">
        <li class="slide selected"><img src="images/slideOne.png" width="700" height="300" alt=""/></li>
        <li class="slide"><img src="images/slideTwo.png" width="700" height="300" alt=""/></li>
        <li class="slide"><img src="images/slideThree.png" width="700" height="300" alt=""/></li>
        <li class="slide"><img src="images/slideFour.png" width="700" height="300" alt=""/></li>
    </ul>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
    <div style="clear:both"></div>
</div>

After this is done, w’re going to add some style to it, to make it look better and to hide the images that dose not have the “selected” class on them:

#container {
    margin:100px auto;
    padding:10px;
    width:700px;
    border:1px solid #ccc;
    }
#slider {
    display:block;
    width:100%;
    height:300px;
    padding:0;
    margin:0 0 10px;
    overflow:hidden;
    }    
#prev, #next {
    bottom:0;
    display:block;
    width:120px;
    background-color:#00ABFF;
    padding:5px;
    border:none;
    font-size:17px;
    color:#fff;
    }
#prev {
    float:left;
    }
#next {
    float:right;
    }

Now, if you look at it, it looks like an acutal image slider, right? But it’s not yet functional. What we need to do to make this work, is the create the jQuery functions for the next and previous buttons.

But before we do that, we need to create two javascript variables. $next and $selected. These store the first and last image in the slider, so it can loop if it reaches the last image.

Also, please note that you MUST place the jQuery code, after the HTML structure of the slider or in the footer of your document. Otherwise it won’t work. You can also put it into a new file, but when you include it, make sure to place it at the footer.

// Have the first and last li's set to a variable
var $first = $('li:first', 'ul'),
      $last = $('li:last', 'ul');

And then, for the next and previous functions, we create the following:

$("#next").click(function () {
    var $next,
        $selected = $(".selected");
    // get the selected item
    // If next li is empty , get the first
    $next = $selected.next('li').length ? $selected.next('li') : $first;
    $selected.removeClass("selected").fadeOut('fast');
    $next.addClass('selected').fadeIn('fast');
});

And

$("#prev").click(function () {
    var $prev,
        $selected = $(".selected");
    // get the selected item
    // If prev li is empty , get the last
    $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
    $selected.removeClass("selected").fadeOut('fast');
    $prev.addClass('selected').fadeIn('fast');
});

To change the animation how the images change, simply change and/or remove the .fadeIn and .fadeOut functions in the code.

After you added all this, you’re slide should work just fine.

To add a time, that automatically loop through the images, add the following script after the variables:

var time = 2000;
var tid = setTimeout(timer, time);
function timer() {
    var $next,
    $selected = $(".selected");
    // get the selected item
    // If next li is empty , get the first
    $next = $selected.next('li').length ? $selected.next('li') : $first;
    $selected.removeClass("selected").fadeOut('fast');
    $next.addClass('selected').fadeIn('fast');
    tid = setTimeout(timer, time); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
    clearTimeout(tid);
}

And your slider should loop automatically now. To change the time between the loops, simply change the var time = 2000; to any value you want. 2000 = 2 seconds.

If you liked this tutorial, please consider sharing it with your friends and followers! Also follow me on Twitter @andornagy