35+ CSS Slideshows - Free Code + Demos
Collection of 35+ CSS Slideshows. All items are 100% free and open-source. The list also includes simple css slideshows, responsive, animated, and horizontal.
1. Slideshow Vanilla JS W/ CSS Transition
Custom slideshow with staggered transitions. Built in vanilla JS.
Author: Riley Adair (RileyAdair)
Links: Source Code / Demo
Created on: January 1, 2018
Made with: HTML, CSS, Babel
2. Untitled Slider
A small experiment which quickly turned into something more.
Author: Nathan Taylor (nathantaylor)
Links: Source Code / Demo
Created on: September 21, 2017
Made with: HTML, SCSS, JS
Tags: slider, photo, gallery, css, animation
3. Parallax Slideshow
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: December 4, 2017
Made with: HTML, SCSS, Babel
4. CSS-only Slideshow
An idea for a page header slideshow for a project at work that eventually ended up moving in another direction.
Author: Johan Lagerqvist (lgrqvst)
Links: Source Code / Demo
Created on: December 24, 2018
Made with: HTML, SCSS
Tags: slideshow
5. Rotating Background Image Slideshow
Author: Jen (outerwhitespace)
Links: Source Code / Demo
Created on: November 30, 2018
Made with: HTML, CSS
6. Slideshow With HTML/CSS (Any Javascript)
SlideShow made with HTML/CSS. Any javascript code is used
Author: VERDIEU Steeve (Flat-Pixels)
Links: Source Code / Demo
Created on: November 18, 2018
Made with: HTML, CSS
Tags: slideshow, pictureanimation, slidepictures, carouselanimation, courselanimation
7. Spooky Scary Clip Text
Spooky CSS only image slideshow with text clipping 🎃
Author: Jefferson Lam (jeffersonlam)
Links: Source Code / Demo
Created on: October 8, 2018
Made with: HTML, SCSS, JS
Tags: cpc-masks, codepenchallenge, halloween, mask, scary
8. Slideshow Concept (No JS)
CSS and HTML Only Slideshow Concept
Author: Peter Butcher (pbutcher)
Links: Source Code / Demo
Created on: July 1, 2018
Made with: HTML, SCSS
Tags: slideshow, pure-css, css, html, no-js
9. Silhouette Zoom Slideshow
Slide show where the person in the current frame is used to zoom into the next frame
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: January 15, 2018
Made with: HTML, CSS, JS
Tags: silhouette, zoom, clippath, person, dark
10. Geometrical Birds - Slideshow
83 triangles morphing and changing color into different birds Polygonal birds Free Vector in Animals by freepik.com
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: October 9, 2017
Made with: HTML, CSS, JS
Tags: geometrical, low-poly, birds, polygonal, slideshow
11. Bubble Slideshow Component
This is a Vue component that uses clip-path for an interesting slideshow transition effect.
Author: Erik Jung (erikjung)
Links: Source Code / Demo
Created on: June 12, 2017
Made with: HTML, PostCSS, JS
Tags: vue, component, clip-path
12. Slideshow Parallax With TweenMax
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: April 19, 2017
Made with: HTML, SCSS, JS
13. Split Slick Slideshow
Vertical slideshow in split screen
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: March 24, 2017
Made with: HTML, SCSS, JS
Tags: slider, vertical, mousewheel, slideshow, slick
14. Slideshow Presentation
Navigate using the up and down arrow keys.
Author: Something Strange (enterthegrave)
Links: Source Code / Demo
Created on: March 9, 2016
Made with: HTML, Sass, CoffeeScript
Tags: slideshow, presentation, arrow-keys
15. Dual Slideshow Demo
Just playing around with a dual pane slideshow concept.
Author: Jacob Davidson (Reklino)
Links: Source Code / Demo
Created on: April 17, 2015
Made with: HTML, SCSS, JS
Tags: slideshow, slide, angularjs, animation, dual
16. A Slideshow With A Blinds Transition
The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath (link to tutorial).
Author: Stathis (stathisg)
Links: Source Code / Demo
Created on: October 3, 2013
Made with: HTML, CSS, JS
Tags: javascript, jquery, slideshow, transition, blinds
17. Split-screen Slideshow
Author: Sean Free (seanfree)
Links: Source Code / Demo
Created on: January 1, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: slideshow, jquery
18. Ken Burns Effect CSS Only
Ken Burns effect CSS only
Author: Dima (dimaZubkov)
Links: Source Code / Demo
Created on: June 10, 2016
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animate, slideshow, fullpage
19. Slick Slideshow With Blur Effect
New pen using the best slideshow plugin ever: Slick http://kenwheeler.github.io/slick/
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: January 19, 2016
Made with: HTML, SCSS, JS
Tags: slick, slideshow, slider, experiment, blur
20. CSS Fadeshow
This is an extended version of my Pure CSS Slideshow Gallery (http://codepen.io/alexerlandsson/pen/RaZdox) which comes with more and easier customisation and previous/next buttons.
Author: Alexander Erlandsson (alexerlandsson)
Links: Source Code / Demo
Created on: May 12, 2016
Made with: HTML, SCSS
Tags: fadeshow, slideshow, css-slideshow, css fadeshow
21. Tweenmax Slideshow
A customizable slideshow tweenmax
Author: Matheus Verissimo (astrixsz)
Links: Source Code / Demo
Created on: August 18, 2016
Made with: HTML, JS
Tags: tweenmax, slideshow, slider, slide, carrousel
22. Nautilus Slideshow
Author: Nikolas Payne (npayne)
Links: Source Code / Demo
Created on: March 9, 2016
Made with: HTML, SCSS, JS
Tags: nautilus, golden-ratio, slideshow, spiral
23. Pure CSS Slideshow Gallery
Responsive slide gallery Navigation and PREV-NEXT buttons created with ♥ and nothing but CSS
Author: Roko C. Buljan (rokobuljan)
Links: Source Code / Demo
Created on: January 19, 2016
Made with: HTML, CSS
Tags: gallery, slideshow, css, animations, slider
24. HTML And CSS Slideshow
A very simple slideshow using only HTML and CSS animating. It does not have back/forward buttons or fancy effects. Included Javascript can be used to calculate clicks on each image but is optional. Uses just one DIV with two sections of CSS.
Author: Zack Wallace (zackw)
Links: Source Code / Demo
Created on: September 10, 2014
Made with: HTML, CSS, JS
Tags: slideshow, no-javascript
25. Responsive CSS Image Slider
More details on my blog
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: September 22, 2013
Made with: HTML, CSS
Tags: slider, carousel, images, css
26. Pure CSS Slideshow
Using CSS only, I created a slideshow that uses pseudo classes to achieve the next and previous functionality.
Author: Charanjit Chana (cchana)
Links: Source Code / Demo
Created on: April 23, 2020
Made with: HTML, SCSS
Tags: css, slideshow, html
27. Pure CSS Image Slider
Author: SitePoint (SitePoint)
Links: Source Code / Demo
Created on: September 17, 2014
Made with: HTML, CSS
28. CSS Image Slider W/ Next/prev Btns & Nav Dots
A 100% pure CSS image slider with next/previous buttons, nav dots and image transitions. Updated with simplified HTML and CSS, better image transitions and resized images.
Author: Dr. Web (drweb)
Links: Source Code / Demo
Created on: January 26, 2020
Made with: HTML, CSS, JS
Tags: slider, image-slider, css, css3, html5
29. Slider CSS Only
Only CSS slider responsive left/right button navigation dots navigation
Author: Elena (semenchenko)
Links: Source Code / Demo
Created on: September 21, 2014
Made with: HTML, CSS
Tags: slider, css-only, avia, responsive-slider, css-slider
30. Auto/Manual Image Slideshow
This is an auto/manual image slideshow that automatically starts and slides through images every 10 seconds, but you can also use the left/right arrows to switch through manually as well. When you click on one of the arrows, the slideshow auto timer will reset the 10 second timer. There ar...Read More
Author: Matt Fried (mattfried)
Links: Source Code / Demo
Created on: August 27, 2018
Made with: HTML, CSS, JS
Tags: auto, manual, image, slide, slideshow
31. CSS Image Slider
Author: Matsu X (MatsuX)
Links: Source Code / Demo
Created on: June 6, 2014
Made with: HTML, CSS
Tags: css, css3, pure-css
32. Mobile First Product Slideshow Widget
Built with Mike Alsup's (malsup) Cycle2 plugin for jQuery, this experiment features a mobile first product slideshow with some neat typography.
Author: Kevin Lesht (klesht)
Links: Source Code / Demo
Created on: January 14, 2015
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: responsive, slideshow, widget, typography
33. CSS Slideshow Text
Author: Joan Leon (nucliweb)
Links: Source Code / Demo
Created on: April 28, 2014
Made with: HTML, CSS
Tags: animation
Horizontal Slideshows
1. CSS-only Slideshow
An idea for a page header slideshow for a project at work that eventually ended up moving in another direction.
Author: Johan Lagerqvist (lgrqvst)
Links: Source Code / Demo
Created on: December 24, 2018
Made with: HTML, SCSS
Tags: slideshow
2. Rotating Background Image Slideshow
Author: Jen (outerwhitespace)
Links: Source Code / Demo
Created on: November 30, 2018
Made with: HTML, CSS
3. Slideshow With HTML/CSS (Any Javascript)
SlideShow made with HTML/CSS. Any javascript code is used
Author: VERDIEU Steeve (Flat-Pixels)
Links: Source Code / Demo
Created on: November 18, 2018
Made with: HTML, CSS
Tags: slideshow, pictureanimation, slidepictures, carouselanimation, courselanimation
4. Spooky Scary Clip Text
Spooky CSS only image slideshow with text clipping 🎃
Author: Jefferson Lam (jeffersonlam)
Links: Source Code / Demo
Created on: October 8, 2018
Made with: HTML, SCSS, JS
Tags: cpc-masks, codepenchallenge, halloween, mask, scary
5. Slideshow Concept (No JS)
CSS and HTML Only Slideshow Concept
Author: Peter Butcher (pbutcher)
Links: Source Code / Demo
Created on: July 1, 2018
Made with: HTML, SCSS
Tags: slideshow, pure-css, css, html, no-js
6. Silhouette Zoom Slideshow
Slide show where the person in the current frame is used to zoom into the next frame
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: January 15, 2018
Made with: HTML, CSS, JS
Tags: silhouette, zoom, clippath, person, dark
7. Geometrical Birds - Slideshow
83 triangles morphing and changing color into different birds Polygonal birds Free Vector in Animals by freepik.com
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: October 9, 2017
Made with: HTML, CSS, JS
Tags: geometrical, low-poly, birds, polygonal, slideshow
8. Bubble Slideshow Component
This is a Vue component that uses clip-path for an interesting slideshow transition effect.
Author: Erik Jung (erikjung)
Links: Source Code / Demo
Created on: June 12, 2017
Made with: HTML, PostCSS, JS
Tags: vue, component, clip-path
9. Slideshow Parallax With TweenMax
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: April 19, 2017
Made with: HTML, SCSS, JS
10. Split-screen Slideshow
Author: Sean Free (seanfree)
Links: Source Code / Demo
Created on: January 1, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: slideshow, jquery
11. Ken Burns Effect CSS Only
Ken Burns effect CSS only
Author: Dima (dimaZubkov)
Links: Source Code / Demo
Created on: June 10, 2016
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animate, slideshow, fullpage
12. Slick Slideshow With Blur Effect
New pen using the best slideshow plugin ever: Slick http://kenwheeler.github.io/slick/
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: January 19, 2016
Made with: HTML, SCSS, JS
Tags: slick, slideshow, slider, experiment, blur
13. CSS Fadeshow
This is an extended version of my Pure CSS Slideshow Gallery (http://codepen.io/alexerlandsson/pen/RaZdox) which comes with more and easier customisation and previous/next buttons.
Author: Alexander Erlandsson (alexerlandsson)
Links: Source Code / Demo
Created on: May 12, 2016
Made with: HTML, SCSS
Tags: fadeshow, slideshow, css-slideshow, css fadeshow
14. Tweenmax Slideshow
A customizable slideshow tweenmax
Author: Matheus Verissimo (astrixsz)
Links: Source Code / Demo
Created on: August 18, 2016
Made with: HTML, JS
Tags: tweenmax, slideshow, slider, slide, carrousel
15. Nautilus Slideshow
Author: Nikolas Payne (npayne)
Links: Source Code / Demo
Created on: March 9, 2016
Made with: HTML, SCSS, JS
Tags: nautilus, golden-ratio, slideshow, spiral
Vertical Slideshows
1. Slideshow Vanilla JS W/ CSS Transition
Custom slideshow with staggered transitions. Built in vanilla JS.
Author: Riley Adair (RileyAdair)
Links: Source Code / Demo
Created on: January 1, 2018
Made with: HTML, CSS, Babel
2. Untitled Slider
A small experiment which quickly turned into something more.
Author: Nathan Taylor (nathantaylor)
Links: Source Code / Demo
Created on: September 21, 2017
Made with: HTML, SCSS, JS
Tags: slider, photo, gallery, css, animation
3. Parallax Slideshow
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: December 4, 2017
Made with: HTML, SCSS, Babel
4. Split Slick Slideshow
Vertical slideshow in split screen
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: March 24, 2017
Made with: HTML, SCSS, JS
Tags: slider, vertical, mousewheel, slideshow, slick
5. Slideshow Presentation
Navigate using the up and down arrow keys.
Author: Something Strange (enterthegrave)
Links: Source Code / Demo
Created on: March 9, 2016
Made with: HTML, Sass, CoffeeScript
Tags: slideshow, presentation, arrow-keys
6. Dual Slideshow Demo
Just playing around with a dual pane slideshow concept.
Author: Jacob Davidson (Reklino)
Links: Source Code / Demo
Created on: April 17, 2015
Made with: HTML, SCSS, JS
Tags: slideshow, slide, angularjs, animation, dual
7. A Slideshow With A Blinds Transition
The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath (link to tutorial).
Author: Stathis (stathisg)
Links: Source Code / Demo
Created on: October 3, 2013
Made with: HTML, CSS, JS
Tags: javascript, jquery, slideshow, transition, blinds
More Awesome Lists:
Share: