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
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
64467 subscribers
- Subscribe by RSS
- Subscribe by Email
- Follow Line25 on Twitter
32 Comments
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?
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 :-(
Super detailed tutorial Chris.. You’ve inspired me to learn Javascript now :) Thank you and keep bringing more of these…
You Rock !
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.
cool, wordpress version in the future?
I’m actually working on implementing this into a wordpress site now.
Thanks Chris, you’re an inspiration.
hey that ur cars chris?…….thax 4 tut
Very nicely explained. Thanks mate.
very useful website
very nice
The scrolling can be automatic ?!
Brilliant! Chris
Really interressing method
good work
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.
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.
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.
Nice One :)
Awesome, thanks for this!
Any tutorial on how to make this into a wordpress plugin??
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 :)
hi , very thanks
I always prefer your method of explaining rather than that of the plethora of others. Thanks for the clear description.
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.
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.
it is working with blogger platform?.. Seriously! this look awesome
How To Build a Sliding Feature Slideshow with jQuery
Awesome info.
i just going to use this my blog theme,,
I really do not understand, why many people like the image slider. I liked it before but not anymore
Really very nice., Jquery slide show,
welcome
Comments are now closed