HTML and CSS Reference
In-Depth Information
Here, we've added quite a bit of new interaction. First, look at the bottom of this script, where
we've added click event listeners to both of our navigational items.
In these functions, we have first set activeSlideshow to false , which disables the automatic
animation of the reel. This provides a better user experience by allowing the user to control the
reel manually. Then, we trigger either the previous or next slide using changeSlide() . Next, in
the changeSlide() function, we've added a clearTimeout() . This works in conjunction with
28
the activeSlideshow value, cancelling any hanging iteration from a setTimeout .
Finally, in the callback of the animate() function, we've added some code to hide and show
the arrow navigation. This hides the left arrow when the slideshow is showing the left-most
slide, and vice versa.
ANIMATING THE BOTTOM NAVIGATION
The basic slideshow works with the previous and next arrows. Let's take it to the next level by
adding the animated navigation. Please note that I am using a more complex markup because
it avoids the use of images and is ultimately simpler. It would have to use three background
images otherwise — one for the center sections and one for each cap to allow the clickable
areas to be larger). However, you could clean up the bottom navigation with a
background-image.
Here is the jQuery code for animation:
$ ( function () {
function changeSlide ( newSlide ) {
// cancel any timeout
clearTimeout ( slideTimeout );
// change the currSlide value
currSlide = newSlide ;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0 ;
else if ( currSlide < 0 ) currSlide = maxSlide ;
// animate the slide reel
$slideReel . animate ({
Search WWH ::




Custom Search