How To Build a Sliding Feature Slideshow with jQuery

How To Build a Sliding Feature Slideshow with jQuery: "
Javascript slideshows are one of the best ways to display lots of information in a relatively small space while adding cool functionality to a web page. Let’s build our own slideshow with sliding panels navigatable by button links. You could use the slideshow to showcase featured content on your homepage, or as a simple image gallery. Either way it’s quick and easy to create with the help of a couple of handy jQuery plugins.


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.
View the jQuery slideshow demo

How it works

The slideshow we’ll be building is created from some simple HTML and CSS, then the cool sliding functionality is powered by the jQuery Javascript library. The LocalScroll and ScrollTo plugins by Ariel Flesler in particular are what provide the underlying effects, with just a few lines of our own code being needed to activate the plugins and put everything into play.
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.
We want to keep basic accessibility in mind when building the slideshow, so the user will still be able to navigate and view all the slides even when Javascript is turned off. This means we’ll have to get the basic HTML and CSS in place first, before tarting it all up with jQuery.

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.
Viewing the page in a browser without any CSS or Javascript will show a crude version of the slideshow where the links will jump the page to the correct image.

The CSS styling

The CSS will style the page into something them resembles a slideshow. First the width and height of the slideshow div is set to the same dimensions as the image slides. Each of these slides is floated side by side, making the total width of the unordered list 4590px (918px x 5 images). To prevent this long line of images running across the whole page the overflow property is used. In the CSS we’ll set it to overflow: scroll; so the slideshow will still work without Javascript, albeit with an ugly scrollbar rather than the cool sliding functionality.
To finish off the demo a cool shadow is added using CSS3 box-shadow.

The slideshow-nav div is then moved into position underneath the main slideshow section. These buttons will only be used along with the Javascript version, so we don’t want a series of buttons that don’t work appearing if the user doesn’t have Javascript enabled. visibility: hidden; will hide these buttons by default, then we can make them visible again later if the user has Javascript turned on.
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 slideshow so far can be seen in a working state without Javascript with just the crude scroll bar allowing the user to move back and forth between the images. The majority of Javascript slideshows on the web break when Javascript is disabled, leaving buttons that don’t work and content that can’t be accessed, so we’ll get extra accessibility points when our content is still viewable.

The jQuery functionality

Before getting into the main slideshow functionality we have a little housekeeping to set things up for users with Javascript enabled. First the CSS of the slideshow div is changed from overflow: scroll; to overflow: hidden; to remove that scrollbar. Then the visibility of the nav buttons is set to visible and an ‘active’ class is automatically added to the first button.
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

A quick test in the browser shows the complete slideshow working in all its jQuery glory. Slides will smoothly transition between each other and the navigation buttons will highlight according to the active slide. Our slideshow not only looks great here, but also degrades and is still accessible even if Javascript and CSS is turned off. Users with older browsers will see the slideshow too, with just fancy CSS3 touches of box-shadow and border-radius not being visible, but they’ll probably never know what they’re missing!
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.
View the jQuery slideshow demo

"