Javascript sliders are a very common way of making the most out of screen real estate. By cycling through multiple images or text much more can be crammed onto a site. The problem comes when users have Javascript turned off – how do you ensure that slider degrades gracefully?
As with most things there are various methods, all with their pros and cons. Here’s some of the most common solutions to the problem:
Show all slides
This is generally what will happen if you don’t provide any fallbacks and it’s not always a bad option. When including a slider in a site it’s often a good idea to think ahead and create a design where the site will still be usable if the images are stacked on top of eachother. By using .js and .no-js classes you can apply some additional styling to the slides such as reducing their size, floating them in two columns etc.
Pros:
Doesn’t take much extra work.
Allows users without JS to see all slides.
Cons:
Design may need to be restricted so the site doesn’t look ‘broken’ when JS is turned off.
If content is added to the slides it’s probably not as important as the content around it. By showing all the slides, more important content may be drowned out.
Use CSS to hide all but the first slide
This option should be used with caution – all the slide’s content will be downloaded even if it’s not displayed. This may not be a big issue if the content is primarily text, however you don’t want to be needlessly downloading images. There’s various ways you can hide things in CSS, as for selecting the elements to hide you could use classes or some advanced CSS selectors.
Pros:
Quick (and dirty).
Cons:
Hidden content will be needlessly downloaded.
Implement a pure CSS slider
CSS can be used to provide simple version of your javascript slider. Neal Grosskopf explains a fairly simple way to implement a pure CSS slider. This method requires that you have some sort of buttons to move between slides. Another thing to be aware of is that you won’t be able to recreate a slider in IE8 and below using pure CSS. Despite this, this method offers fairly good support: all but IE8 users and below with Javascript turned off will get a slider, albeit a less ‘flashy’ one if Javascript is turned off.
Pros:
Gives a good experience to some users with JS turned off.
Cons:
Adds another case to deal with (No JS but supports advanced CSS)
Uses CSS for functionality.
Use Javascript to load additional slides
With this solution, the first slide is in the HTML of the page, the content for any additional slides is loaded through Javascript. Adding content to the DOM is fairly easy, especially with jQuery. The difficult bit is where the content comes from. You could hard code the content into the Javascript file, which isn’t the best solution – what would happen if you were using a CMS? Instead, a better option would be to have the content contained in a JSON file. You could then write some Javascript to parse the JSON and append the slides to the first.
Pros:
Users without JS don’t have to download content.
Site’s layout is kept.
Cons:
The most complex solution listed here.
