Line25

How To Build a Sliding Feature Slideshow with jQuery

Read the full post

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.

View the jQuery slideshow demo

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

View the HTML code

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

View the CSS code

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.

View the CSS code

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.

Slideshow without Javascript enabled

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

View the jQuery code

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

View the jQuery slideshow demo

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

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

32 Comments

  1. Peter says:

    Just some feedback (Mac OS X Leopard, latest browser versions)

    Safari : extremely jerky slide transition
    FF : near perfect
    Chrome : noticeable jerky slide transition
    Opera : doesn't work, shows all pix in vertical alignment

    I know it can be smooth as butter in all four, so more work is needed ;-)

    • Gotta love working on the web, two people, same OS, same browsers, different results.
      Opera, Chrome, Firefox and IE all work fine for me. I do see what you mean about some jerkiness in Safari though. Any suggestions? The only thing I can think is that it's just how the scrolling effect is implemented in the ScrollTo plugin?

      • Ithi says:

        I have the same FF & Chrome works fine but Safari is just like 3 fps. I dont have idea what is wrong but something is. Good tutorial btw :) I would like some tutorial with images grid.

      • How many issues are you finding with Internet Explorer version 9? I'm already sick of finding bugs with all past code that has worked fine in all browsers. Even the Joomla back end is having trouble, I should of stuck to word press :-(

  2. Nirmal Shah says:

    Super detailed tutorial Chris.. You've inspired me to learn Javascript now :) Thank you and keep bringing more of these…

    You Rock !

  3. Yashodhan Deshmukh says:

    Its grate as all the post are ..
    I to agree with Peter it can be more smoother ..
    Thank you for the post
    Its well explained.

  4. cool, wordpress version in the future?

  5. ABDUL JANOO says:

    hey that ur cars chris?…….thax 4 tut

  6. Very nicely explained. Thanks mate.

  7. very useful website

  8. pratima says:

    very nice

  9. Danilo Ramos says:

    The scrolling can be automatic ?!

  10. robnilas says:

    Brilliant! Chris

  11. Bokiboka says:

    Really interressing method
    good work

  12. Ferdy says:

    Great tutorial, and sliders definitely are popular. Watch your page load speed though. Most sliders simply load all images at once. Since you usually show mostly hi-res photos in a slider, and typically about 5 of them, you can easily add 1MB or more to the page's total size.

    That may not matter much in benefitial bandwidth conditions but on a global site it definitely matters. In my own project, page load varied between 4.5 and 35 seconds, and the primary issue was the slider.

  13. Good, well explained tutorial. Although I would worry about bringing in two plugins to just create one simple slider. Good starting point for beginners though.

  14. Rickard Lund says:

    The problems people are having makes me feel weird. When I built my own version of this (no external code, just from scratch) I got smooth results in Safari, some small lag in Chrome, and whole lot of lag in Firefox 4. JavaScript/DOM-behaviour is a straaaange place.

  15. Akash says:

    Nice One :)

  16. GreenBot says:

    Awesome, thanks for this!

  17. Any tutorial on how to make this into a wordpress plugin??

  18. ChesterJulie says:

    Great tute, thanks. I've seen an increasing number of JQuery slideshows lately, although haven't created one yet myself! This is something for me to try at the weekend :)

  19. Josh says:

    I always prefer your method of explaining rather than that of the plethora of others. Thanks for the clear description.

  20. Wow thanks for this its probably the most in depth tutorial I've found to date. I don't know how you find the time to put things like this together but I am so glad you do because it has helped me no end and saved me lots of time.

  21. Really well explained post. I learned quite a bit and it was an easy to follow and precise tutorial so thank you guys. Thanks for sharing. Keep posting.

  22. daus says:

    it is working with blogger platform?.. Seriously! this look awesome

  23. How To Build a Sliding Feature Slideshow with jQuery

    Awesome info.

  24. Fareed khan says:

    i just going to use this my blog theme,,

  25. barog says:

    I really do not understand, why many people like the image slider. I liked it before but not anymore

  26. Dhanapal says:

    Really very nice., Jquery slide show,

Sorry, comments are now closed