Slideshows are a popular way of presenting images, videos, or other content on a web page. They can be used for various purposes, such as showcasing a portfolio, displaying testimonials, highlighting products, or telling a story. Slideshows can also enhance the visual appeal and interactivity of a web page, as they can include animations, transitions, effects, and user controls.

However, creating a slideshow from scratch can be challenging and time-consuming, especially if you want to make it responsive, accessible, and compatible with different browsers and devices. Fortunately, there are many free and open-source CSS slideshow code examples that you can use as a starting point or inspiration for your own projects. These examples demonstrate the power and versatility of CSS, as they can create stunning slideshows with minimal HTML and JavaScript.

In this article, we will showcase some of the most creative and beautiful CSS slideshow code examples from CodePen, GitHub, and other resources. We will also provide a brief description of each example, as well as the link to the source code and the live demo. These examples are updated as of November 2021 collection, and include 4 new items.

Related Articles

  1. jQuery Slideshows

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS)

About a code

Doggie Screensaver

Pretty hacky attempt at recreating the floating screensaver for the photo gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS)

About a code

CSS Slideshow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Slideshow Vanilla JS

Author

  • Riley Adair

Made with

  • HTML
  • CSS
  • JavaScript/Babel

About the code

Slideshow Vanilla JS

Custom slideshow with staggered transitions. Built in vanilla JS.

Demo image: Untitled Slider

Author

  • Nathan Taylor

Made with

  • HTML
  • CSS/SCSS

About the code

Untitled Slider

A small experiment which quickly turned into something more.

Demo image: Parallax Slideshow

Author

  • Bruno Carvalho

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jQuery.js)

About the code

Parallax Slideshow

HTML, CSS and JS slideshow with parallax effect.

Demo Image: Split Slick Slideshow
Demo Image: Split Slick Slideshow

Split Slick Slideshow

Vertical slideshow in split screen.
Made by Fabio Ottaviani
March 29, 2017

Demo Image: Slideshow Presentation
Demo Image: Slideshow Presentation

Slideshow Presentation

Navigate using the up and down arrow keys.
Made by Keith Driessen
March 9, 2016

Demo Image: Dual Slideshow
Demo Image: Dual Slideshow

Dual Slideshow

Just playing around with a dual pane slideshow concept.
Made by Jacob Davidson
April 17, 2015

Demo Image: A Pure CSS3 Slideshow
Demo Image: A Pure CSS3 Slideshow

A Pure CSS3 Slideshow

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.
Made by Stathis
October 3, 2013

Author

  • Johan Lagerqvist

Made with

  • HTML / CSS (SCSS)

About the code

CSS-only Slideshow

An idea for a page header slideshow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jen

Made with

  • HTML / CSS

About the code

Rotating Background Image Slideshow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • VERDIEU Steeve

Made with

  • HTML / CSS

About the code

Slideshow with HTML/CSS

Slideshow made with HTML/CSS. Any javascript code is used.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jefferson Lam

Made with

  • HTML / CSS (SCSS)

About the code

Spooky Scary Clip Text

Spooky CSS only image slideshow with text clipping.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Peter Butcher

Made with

  • HTML / CSS (SCSS)

About the code

Slideshow Concept

A pure CSS and HTML slideshow concept. To add or remove slides: 1. add a new slide template in the HTML; 2. update the $slide-count SCSS variable; 3. tab colours: update the $c-slides SCSS variable 4. slide popout images: update the $b-slides SCSS variable. Use the tabs below to change slide.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Silhouette Zoom Slideshow

Author

  • Mikael Ainalem

Made with

  • HTML + SVG / CSS / JavaScript

About the code

Silhouette Zoom Slideshow

Slide show where the person in the current frame is used to zoom into the next frame.

Demo image: Geometrical Birds - Slideshow

Author

  • Mikael Ainalem

Made with

  • HTML
  • CSS
  • JavaScript (anime.js)

About the code

Geometrical Birds - Slideshow

83 triangles morphing and changing color into different birds.

Demo image: Bubble Slideshow Component

Author

  • Erik Jung

Made with

  • HTML
  • CSS/PostCSS
  • JavaScript (Vue.js)

About the code

Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

Demo image: Slideshow Parallax With TweenMax

Author

  • Bruno Carvalho

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js, TweenMax.js)

About the code

Slideshow Parallax

Slideshow Parallax with TweenMax.js

Demo Image: Split-Screen Slideshow
Demo Image: Split-Screen Slideshow

Split-Screen Slideshow

HTML, CSS and JavaScript split-screen slideshow.
Made by Sean Free
January 9, 2017

Demo Image: Only CSS Slideshow Effect
Demo Image: Only CSS Slideshow Effect

Only CSS Slideshow Effect

Ken Burns slideshow effect CSS only.
Made by Dima
December 12, 2016

Demo Image: Slick Slideshow With Blur Effect
Demo Image: Slick Slideshow With Blur Effect

Slick Slideshow With Blur Effect

Slideshow with blur effect in HTML, CSS and JavaScript.
Made by Fabio Ottaviani
November 11, 2016

Demo Image: CSS Fadeshow
Demo Image: CSS Fadeshow

CSS Fadeshow

This is an extended version of pure CSS slideshow gallery http://codepen.io/alexerlandsson/pen/RaZdox which comes with more and easier customisation and previous/next buttons.
Made by Alexander Erlandsson
October 24, 2016

Author

  • Just another Chris

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

3-D Split Image Slideshow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo Image: TweenMax Slideshow
Demo Image: TweenMax Slideshow

TweenMax Slideshow

A customizable slideshow TweenMax.
Made by Matheus Verissimo
August 28, 2016

Demo Image: Nautilus Slideshow
Demo Image: Nautilus Slideshow

Nautilus Slideshow

Nautilus slideshow with HTML, CSS and JavaScript.
Made by Nikolas Payne
March 9, 2016