Jump to main content

CSS Slideshow

Can you build a slideshow using only css (and progressice enhance it with javascript)?
Of course you can! :)

These days many people (including me) reaches for javascript far to often.
With modern html/css you can create a lot of functionality completely without javascript.

And the best part is that you then can use javascript to progressive enhance the feature.
This way it will work even if javascript is disabled/broken/not yet loaded.

Here is an example of a simple "slideshow" with just css (you just scroll it sideways to step forward/backward).

https://codepen.io/overtune/pen/VwRZoBV?editors=1100

Here is an adjusted example where we display multiple items.

https://codepen.io/overtune/pen/xxBKNJo?editors=1100

Here is an example which uses "progressive enhancement" to add buttons to step forward/backward.

https://codepen.io/overtune/pen/qBvBWJW

Read more / sources: