How To Build a Sliding Feature Slideshow with jQuery

spacer

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.

spacer

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

spacer

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

spacer

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.

spacer

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.

spacer

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

spacer

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

spacer

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

  • Tweet
spacer
Written by Chris Spooner

Chris Spooner is a designer who has a love for creativity and enjoys experimenting with various techniques in both print and web. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

More posts like this

  • How To Create a Cool Animated Menu with jQuery
  • Code a Stylish Portfolio Site Design in HTML & CSS
  • How To Create a Slick Features Table in HTML & CSS
  • Create a Grid Based Web Design in HTML5 & CSS3
  • Create a Stylish Contact Form with HTML5 & CSS3
  • Code a Textured Outdoors Website in HTML & CSS

32 Comments

  1. spacer Peter says:
    May 16, 2011 at 8:47 am

    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 ;-)

    • spacer Chris Spooner says:
      May 16, 2011 at 9:32 am

      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?

      • spacer Ithi says:
        May 16, 2011 at 6:05 pm

        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.

      • spacer Web Designer Hull says:
        May 22, 2011 at 4:10 pm

        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. spacer Nirmal Shah says:
    May 16, 2011 at 9:22 am

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

    You Rock !

  3. spacer Yashodhan Deshmukh says:
    May 16, 2011 at 9:27 am

    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. spacer Filipe Valente says:
    May 16, 2011 at 9:41 am

    cool, wordpress version in the future?

    • spacer Ashley says:
      May 20, 2011 at 11:07 pm

      I’m actually working on implementing this into a wordpress site now.

      Thanks Chris, you’re an inspiration.

  5. spacer ABDUL JANOO says:
    May 16, 2011 at 11:54 am

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

  6. spacer Maybray Digital says:
    May 16, 2011 at 12:04 pm

    Very nicely explained. Thanks mate.

  7. spacer web sesign dubai says:
    May 16, 2011 at 12:28 pm

    very useful website

  8. spacer pratima says:
    May 16, 2011 at 12:45 pm

    very nice

  9. spacer Danilo Ramos says:
    May 16, 2011 at 6:03 pm

    The scrolling can be automatic ?!

  10. spacer robnilas says:
    May 16, 2011 at 6:19 pm

    Brilliant! Chris

  11. spacer Bokiboka says:
    May 16, 2011 at 6:30 pm

    Really interressing method
    good work

  12. spacer Ferdy says:
    May 16, 2011 at 7:37 pm

    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. spacer HTML Codes Dude says:
    May 16, 2011 at 8:43 pm

    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. spacer Rickard Lund says:
    May 16, 2011 at 9:01 pm

    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. spacer Akash says:
    May 17, 2011 at 9:09 pm

    Nice One :)

  16. spacer GreenBot says:
    May 18, 2011 at 3:10 am

    Awesome, thanks for this!

  17. spacer Jatin Hariani says:
    May 18, 2011 at 11:08 am

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

  18. spacer ChesterJulie says:
    May 18, 2011 at 8:23 pm

    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. spacer Persian Wordpress says:
    May 18, 2011 at 9:25 pm

    hi , very thanks

  20. spacer Josh says:
    May 19, 2011 at 5:33 am

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

  21. spacer Web design Dan says:
    May 19, 2011 at 8:05 am

    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.

  22. spacer John Hendricks says:
    May 20, 2011 at 10:03 am

    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.

  23. spacer daus says:
    May 21, 2011 at 1:04 am

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

  24. spacer web designing uae says:
    May 23, 2011 at 6:59 am

    How To Build a Sliding Feature Slideshow with jQuery

    Awesome info.

  25. spacer Fareed khan says:
    May 23, 2011 at 8:52 pm

    i just going to use this my blog theme,,

  26. spacer barog says:
    May 24, 2011 at 6:04 am

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

  27. spacer Dhanapal says:
    May 25, 2011 at 8:03 am

    Really very nice., Jquery slide show,

    • spacer Dhanapal says:
      May 25, 2011 at 8:04 am

      welcome

Comments are now closed

64467 subscribers

  • Subscribe by RSS
  • Subscribe by Email
  • Follow Line25 on Twitter

What you're saying

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.