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.
- 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.
- Quick (and dirty). Cons:
- Hidden content will be needlessly downloaded.
Implement a pure CSS slider
- 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.
- Users without JS don’t have to download content.
- Site’s layout is kept. Cons:
- The most complex solution listed here.