How To Build a Sliding Feature Slideshow with jQuery
Last year I created a slideshow of my dream motorcycle, a Harley Davidson Sportster. This time let’s base the slideshow on my dream car, a Lamborghini Gallardo (or Murcielago – I’m not fussy!). Last time we built the slideshow with an automatic cycling effect with manual controls. This time we’ll create a sliding effect with navigation buttons that allow the user to jump immediately to any slide.
How it works
LocalScroll and ScrollTo work hand in hand to provide the overall slideshow functionality. LocalScroll allows the anchors to jump the slideshow to the correct slide according to the targeted ID, while ScrollTo provides the cool sliding functionality to smoothly transition the slides rather than simply jump between them.
The HTML structure
The HTML for the demo page begins with the usual items of Doctype, title and link to CSS stylesheet. The jQuery library, the two plugins and our own empty scripts.js file can then be linked up so they’re ready to bring the slideshow to life later.
The HTML that makes up the actual slideshow is split into two sections, a div with an ID of slideshow and one with and ID of slideshow-nav. The slideshow div contains an unordered list of linked images, with with <li> having an ID that corresponds to the slideshow-nav anchors below.
The CSS styling
To finish off the demo a cool shadow is added using CSS3 box-shadow.
The anchors of each of the navigation list are then transformed into circular buttons using CSS3 border-radius and the default text shifted off screen with negative text-indent. Non-supporting browsers will see a square button instead, but to keep things super compatible across all browsers a simple image could have been used.
The jQuery functionality
The LocalScroll and ScrollTo plugins are then activated with one simple line. We’re applying the localScroll functionality to the slideshow-nav items and telling them to target the slideshow items by moving them along the X axis. There’s plenty more options to choose from including various easing effects, but this is basically all we need to get things up and running.
Finally we want to make sure our buttons light up with the relevant active class whenever they’re clicked, so a simple jQuery rule removes the active class from all buttons then adds it to whichever anchor was clicked. This active class then appears in the CSS stylesheet to give the button a grey background fill.
The complete jQuery slideshow
Feel free to view source and copy/paste the HTML, CSS and jQuery from the demo for use in your own projects. Don’t forget to download the awesome jQuery plugins of LocalScroll and ScrollTo from Arial Flesler.