HTML and CSS Reference
In-Depth Information
});
}
function nextSlide () {
changeSlide ( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true ,
currSlide = 0 ,
slideTimeout ,
$slideshow = $ ( '#slideshow' ),
$slideReel = $slideshow . find ( '#slideshow-reel' ),
maxSlide = $slideReel . children (). length - 1 ;
// start the animation
slideTimeout = setTimeout ( nextSlide , 1200 );
});
Here, we've started by creating the function changeSlide() , which animates the slide reel.
This function accepts an index for the next slide to show, and it checks to make sure that the
value isn't too high or low to be in the reel.
Next, it animates the slide reel to the appropriate position, and then finishes by setting a new
timeout to trigger the next iteration.
26
Finally, we've built the function nextSlide() , which simply triggers changeSlide() to show
the next slide in the reel. This simple function is just a shortcut to be used with setTimeout() .
THE LEFT AND RIGHT NAVIGATION
Next, let's set up the left and right arrows in the slideshow, starting with the mark-up:
< a href =" # " id =" slideshow-prev "></ a >
< a href =" # " id =" slideshow-next "></ a >
 
Search WWH ::




Custom Search