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
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
To finish off the demo a cool shadow is added using CSS3
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
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
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.