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

Praveen Kumar

I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.

Post navigation