Top 24 CSS Slideshows

Collection of free HTML and CSS slideshow code: simple, responsive, animated, horizontal, vertical and etc.

SLIDESHOW VANILLA JS

Custom slideshow with staggered transitions. Built in vanilla JS. Made with HTML / CSS / JavaScript/Babel by Riley Adair.

See the Pen
Slideshow Vanilla JS w/ CSS Transition by Riley Adair (@RileyAdair)
on CodePen.

Demo and Download

UNTITLED SLIDER

A small experiment which quickly turned into something more. Made with HTML/CSS/SCSS by Nathan Taylor.

See the Pen
Untitled Slider by Nathan Taylor (@nathantaylor)
on CodePen.

Demo and Download

PARALLAX SLIDESHOW

HTML, CSS and JS slideshow with parallax effect. Made with HTML/CSS/SCSS / JavaScript/Babel (jQuery.js) by Bruno Carvalho.

See the Pen
Parallax Slideshow by Bruno Carvalho (@bcarvalho)
on CodePen.

Demo and Download

SPLIT SLICK SLIDESHOW

Vertical slideshow in split screen. Made by Fabio Ottaviani.

See the Pen
Split Slick Slideshow by Fabio Ottaviani (@supah)
on CodePen.

Demo and Download

SLIDESHOW PRESENTATION

Navigate using the up and down arrow keys. Made by Keith Driessen.

See the Pen
Slideshow presentation by Something Strange (@something-strange)
on CodePen.

Demo and Download

DUAL SLIDESHOW

Just playing around with a dual pane slideshow concept. Made by Jacob Davidson.

See the Pen
Dual Slideshow Demo by Jacob Davidson (@Reklino)
on CodePen.

Demo and Download

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.

See the Pen
A slideshow with a blinds transition by Stathis (@stathisg)
on CodePen.

Demo and Download

CSS-ONLY SLIDESHOW

An idea for a page header slideshow. Made with HTML / CSS (SCSS) by Johan Lagerqvist.

See the Pen
CSS-only slideshow by Johan Lagerqvist (@lgrqvst)
on CodePen.

Demo and Download

ROTATING BACKGROUND IMAGE SLIDESHOW

Made with HTML / CSS by Jen.

See the Pen
Rotating Background Image Slideshow by Jen (@outerwhitespace)
on CodePen.

Demo and Download

SLIDESHOW WITH HTML/CSS

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

See the Pen
Slideshow with HTML/CSS (Any Javascript) by VERDIEU Steeve (@Flat-Pixels)
on CodePen.

Demo and Download

SPOOKY SCARY CLIP TEXT

Spooky CSS only image slideshow with text clipping. Made with HTML / CSS (SCSS) by Jefferson Lam.

See the Pen
Spooky Scary Clip Text by Jefferson Lam (@jeffersonlam)
on CodePen.

Demo and Download

SLIDESHOW CONCEPT

A pure CSS and HTML slideshow concept by Peter Butcher.

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.

See the Pen
Slideshow Concept (No JS) by Peter Butcher (@pbutcher)
on CodePen.

Demo and Download

SILHOUETTE ZOOM SLIDESHOW

Slide show where the person in the current frame is used to zoom into the next frame. Made with HTML + SVG / CSS / JavaScript by Mikael Ainalem.

See the Pen
Silhouette zoom slideshow by Mikael Ainalem (@ainalem)
on CodePen.

Demo and Download

GEOMETRICAL BIRDS – SLIDESHOW

83 triangles morphing and changing color into different birds. Made with HTML/CSS/JavaScript (anime.js) by Mikael Ainalem.

See the Pen
Geometrical Birds – slideshow by Mikael Ainalem (@ainalem)
on CodePen.

Demo and Download

BUBBLE SLIDESHOW COMPONENT

This is a Vue component that uses clip-path for an interesting slideshow transition effect. Made with HTML/CSS/PostCSS/JavaScript (Vue.js) by Erik Jung.

See the Pen
Bubble Slideshow Component by Erik Jung (@erikjung)
on CodePen.

Demo and Download

SLIDESHOW PARALLAX

Slideshow Parallax with TweenMax.js. Made with HTML/CSS/SCSS/JavaScript (jQuery.js, TweenMax.js) by Bruno Carvalho.

See the Pen
Slideshow Parallax with TweenMax by Bruno Carvalho (@bcarvalho)
on CodePen.

Demo and Download

SPLIT-SCREEN SLIDESHOW

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

See the Pen
Split-screen Slideshow by Sean Free (@seanfree)
on CodePen.

Demo and Download

CSS SLIDESHOW EFFECT

Ken Burns slideshow effect CSS only. Made by Dima.

See the Pen
Ken Burns effect CSS only by Dima (@dimaZubkov)
on CodePen.

Demo and Download

SLICK SLIDESHOW WITH BLUR EFFECT

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

See the Pen
Slick Slideshow with blur effect by Fabio Ottaviani (@supah)
on CodePen.

Demo and Download

CSS FADESHOW

This is an extended version of pure CSS slideshow gallery which comes with more and easier customisation and previous/next buttons. Made by Alexander Erlandsson.

See the Pen
CSS Fadeshow by Alexander Erlandsson (@alexerlandsson)
on CodePen.

Demo and Download

TWEENMAX SLIDESHOW

A customizable slideshow TweenMax. Made by Matheus Verissimo.

See the Pen
Tweenmax slideshow by Matheus Verissimo (@astrixsz)
on CodePen.

Demo and Download

NAUTILUS SLIDESHOW

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

See the Pen
Nautilus Slideshow by Nikolas Payne (@npayne)
on CodePen.

Demo and Download

GREENSOCK ANIMATED SLIDESHOW

A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax. Made by Arden.

See the Pen
Greensock animated slideshow [wip] by Arden (@aderaaij)
on CodePen.

Demo and Download