JQuery Slideshow Tutorial

Today I'm going to take you through a simple jQuery slideshow and by going through the process step by step, hopefully show you just how easy it is to come up with an idea and achieve it with jQuery.

Let's start with the HTML.

<div id="slideshow">

    <div id="slideshowWindow">

   

        <div class="slide">

            <img src="slide1.jpg" />

        </div><!--/slide-->

       

        <div class="slide">

            <img src="slide2.jpg" />

        </div><!--/slide-->

       

        <div class="slide">

            <img src="slide3.jpg" />

        </div><!--/slide-->

       

    </div><!--/slideshowWindow-->

</div><!--/slideshow-->

Now Lets add some css:

#slideshow #slideshowWindow {

        width:500px;

        height:257px;

        margin:0;

        padding:0;

        position:relative;

        overflow:hidden;

}

#slideshow #slideshowWindow .slide {

        margin:0;

        padding:0;

        width:500px; 

        height:257px;

        float:left;

        position:relative;

}

Now we
need to add some jQuery to make our slides move. If you haven't got it already,
you need to download jQuery. Once you've got it, you'll
need to include the file in the head section of your page, making sure that
you've got the path correct:


 
<script type="text/javascript" src="jquery.js"></script>
               



Now we can start writing the jQuery code that'll make out slides
move.



The first thing we need is our document.ready function. In the
head, below where you called the jQuery file, add the following:


 
<script type="text/javascript">
        $(document).ready(function() {
               
               //our code will go here
 
});
</script>
               



Now we're set up and ready to go. First we're going to need some
variables. Type the following in the document.ready function:


 
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;



The first variable records which slide we're currently viewing.
The slideWidth variable is self explanatory. Next we have a variable called
slides which lets us refer to our slides in the jQuery code and the last
variable gives us the number of slides in our slideshow. As you can see, it
automatically calculates the number of slides by counting the number of divs
that are of the class slide.



To get the slides to line up across the page, we need to add
another div. We're going to do this with jQuery. This div will hold all the
slides and allow the float:left property to work. Add the following code:


 
slides.wrapAll('<div id="slidesHolder"></div>')



Now we need to float the slides so they line up side by side.


 
slides.css({ 'float' : 'left' });



If you remove the overflow:hidden from the slideshowWindow div
and run the code now, you'll see what this achieves.



Next we want to set the width of #slidesHolder div. This needs
to be set to the width of all the slides added together. We can do this easily
in jQuery:


 
$('#slidesHolder').css('width', slideWidth * numberOfSlides);



We're just using jQuery to change the width set in our css. So
now we need to move the slides from one to the other. We will require two
functions. The first function will determine how far along we are along our sequence
of slides, so we know where to go next and so that when we reach the last
slide, we know to jump back to the beginning. Here is the function:


 
function changePosition() {
                       if(currentPosition == numberOfSlides) {
                               currentPosition = 1;
                       } else {
                               currentPosition++;
                       }
                       moveSlide();
}
        



The first part of the if/else statement deals with when reach
the end of the slide show. When we come to the last slide we want to jump back
to the beginning, otherwise the currentSlide variable is simply incremented by
1 and then another function moveSlide is called.


 
function moveSlide() {
        $('#slideHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
}



This is the business end of the jQuery code, this function sets
the left margin of the slidesHolder div to the width of the slide multiplied by
the slide number and then animates to that from the current left margin. But if
you run your code now you'll notice that nothing is happening. That's because
we haven't called the changePosition function yet.



We want the slide to change every few seconds so we'll set a
timer that calls the function periodically.



First we need to set a variable to hold the timer. Below the
other variables, add the following:


 
var slideShowInterval;
               var speed = 6000;



As you can see we've also added a variable to control the speed.
This is the speed in milliseconds, so 6000 is equal to 6 seconds.



So now we need to set up our timer:


 
               slideShowInterval = setInterval(changePosition, speed);



We're using the jQuery setInterval function. It takes two
parameters, the function that it calls and the speed. So this will call the
changePosition function (which in turn calls the moveSlide function) every 6
seconds.



Your jQuery code should look like this:


 
<script type="text/javascript">
        $(document).ready(function() {
                                                        
               var currentPosition = 0;
               var slideWidth = 500;
               var slides = $('.slide');
               var numberOfSlides = slides.length;
               var slideShowInterval;
               var speed = 3000;
 
               
               slideShowInterval = setInterval(changePosition, speed);
               
               slides.wrapAll('<div id="slidesHolder"></div>')
               
               slides.css({ 'float' : 'left' });
               
               $('#slidesHolder').css('width', slideWidth * numberOfSlides);
               
               
               function changePosition() {
                       if(currentPosition == numberOfSlides - 1) {
                               currentPosition = 0;
                       } else {
                               currentPosition++;
                       }
                       moveSlide();
               }
               
               
               function moveSlide() {
                               $('#slidesHolder')
                                 .animate({'marginLeft' : slideWidth*(-currentPosition)});
               }
 
        });
</script>




                   Go Next Lesson for Full Slide Code >>