CSS Slideshows

40 CSS Slideshows

Get hand-picked CSS slideshow collections. Demos and Tutorial links are available.

Demo Image: Slideshow Owl Carousel + YouTube

Slideshow Owl Carousel + YouTube

Slideshow Owl Carousel + YouTube

Author:
Pierre Vion
Created:
SEPTEMBER 14, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Responsive Multi-image Slideshow

Responsive Multi-image Slideshow

A slideshow with multiple images per slide that split into individual slides on mobile, and merge back on tablet or desktop. It also utilizes the picture element for responsive images that change to portrait proportions on mobile. Adapted from slick.js.

Author:
Liz Morrison
Created:
JULY 18, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Responsive Vanilla JS Slideshow

Responsive Vanilla JS Slideshow

A simple responsive Vanilla JS slideshow with different forms of navigation.

Author:
Arden
Created:
DECEMBER 10, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Slideshow 3d showcase

Slideshow 3d showcase

Simple slideshow using css3 transforms 3d to showcase website layouts or anything else you want.

Author:
Jerome Renders
Created:
DECEMBER 30, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Slideshow presentation

Slideshow presentation

Navigate using the up and down arrow keys.

Author:
Something Strange
Created:
MARCH 09, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Split-screen Slideshow

Split-screen Slideshow

Split-screen Slideshow

Author:
Sean Free
Created:
JANUARY 02, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Pure CSS Slideshow Gallery

Pure CSS Slideshow Gallery

Responsive slide gallery Navigation and PREV-NEXT buttons created and nothing but CSS

Author:
Roko C. Buljan
Created:
JANUARY 19, 2016
Made with:
HTML, CSS
Demo Image: Geometrical Birds - slideshow

Geometrical Birds - slideshow

83 triangles morphing and changing color into different birds. Polygonal birds Free Vector in Animals by freepik.com

Author:
Mikael Ainalem
Created:
OCTOBER 09, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Parallax Slideshow

Parallax Slideshow

Parallax Slideshow with arrow and auto slideshow

Author:
Bruno Carvalho
Created:
DECEMBER 04, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Bubble Slideshow Component

Bubble Slideshow Component

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

Author:
Erik Jung
Created:
JUNE 12, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Silhouette zoom slideshow

Silhouette zoom slideshow

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

Author:
Mikael Ainalem
Created:
JANUARY 15, 2018
Made with:
HTML, CSS and JavaScript
Demo Image: Slideshow with Tabs

Responsive slideshow with Tabs

A full-width, responsive and easy to customize slideshow.

Author:
dedevillela
Created:
MAY 21, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Slideshow Parallax with TweenMax

Slideshow Parallax with TweenMax

Slideshow Parallax with TweenMax

Author:
Bruno Carvalho
Created:
APRIL 19, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Fullscreen slideshow with menu

Fullscreen slideshow with menu

Fullscreen slideshow with Slick Carousel with navigation buttons and burger menu.

Author:
Hitz Kareaga
Created:
JANUARY 26, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Simple Image Slider

Simple Image Slider

A simple JQuery image slider! Features: - Automatic slideshow - Pause on hover - Dynamic slide counter - Show/Hide controls on hover

Author:
André Cortellini
Created:
AUGUST 14, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Automatic infinite slideshow with jQuery

Automatic infinite slideshow with jQuery

An automatic infinite slideshow made with 4 lines of jQuery.

Author:
Geoffrey Crofte
Created:
DECEMBER 03, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Cycle Slideshow Slider

Cycle Slideshow Slider

Cycle Slideshow Slider build on top of Cycle2 jQuery plugin. Declarative nature of plugin is very convenient (custom data-attributes).

Author:
Bram de Haan
Created:
MAY 20, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: SlideShow Animated

SlideShow Animated

SlideShow using javascript and css .

Author:
Manu K
Created:
MARCH 27, 2018
Made with:
HTML, CSS and JavaScript
Demo Image: Slideshow in a button

Slideshow in a button

Slideshow in a button. Uses some heavy css3, some light jQuery and some messy html. It works fine in desktop browsers

Author:
Martyn Knapton
Created:
DECEMBER 27, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Mobile First Product Slideshow Widget

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
Created:
JANUARY 14, 2015
Made with:
HTML/Haml, CSS/SCSS
Demo Image: Table Cell Slideshow

Table Cell Slideshow

Creating a slideshow with fancy effects based on table cell.

Author:
Jon Christensen
Created:
FEBRUARY 27, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Slideshow CSS with image preview

Slideshow CSS with image preview

here a full Css slideshow w/out js

Author:
Christophe Molina B.
Created:
SEPTEMBER 12, 2012
Made with:
HTML, CSS
Demo Image: Basic HTML Slideshow

Basic HTML Slideshow

Making a slideshow I can use for presentations using HTML, CSS and JavaScript

Author:
Tommy Hodgins
Created:
JANUARY 20, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Slideshow Concept (No JS)

Slideshow Concept (No JS)

CSS and HTML Only Slideshow Concept

Author:
Peter Butcher
Created:
JULY 01, 2018
Made with:
HTML, CSS
Demo Image: Responsive Slideshow Concept

Responsive Slideshow Concept

This concept for a responsive slideshow was built with Mike Alsup’s Cycle2 plugin for jQuery. The thumbnails are dynamically generated using a little DOM traversal!

Author:
Kevin Lesht
Created:
JUNE 25, 2015
Made with:
HTML, CSS
Demo Image: CSS Infinite Slideshow

CSS Infinite Slideshow

CSS Infinite Slideshow

Author:
Chris Coyier
Created:
MAY 27, 2016
Made with:
HTML, CSS
Demo Image: ScrollMagic Tutorial – Fullscreen Slideshow

ScrollMagic Tutorial – Fullscreen Slideshow

Learn how to use ScrollMagic's triggerHook, triggerElement, setPin, addIndicators and setClassToggle.

Author:
Petr Tichy
Created:
APRIL 06, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Vanilla JS Lightbox Slideshow

Vanilla JS Lightbox Slideshow

A simple vanilla js lightbox slideshow script

Author:
Arden
Created:
SEPTEMBER 26, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: CSS Slideshow text

CSS Slideshow text

CSS Slideshow text

Author:
Joan Leon
Created:
APRIL 28, 2014
Made with:
HTML, CSS
Demo Image: CSS3 Slideshow with Image Panning and zooming Effect

CSS3 Slideshow with Image Panning and zooming Effect

CSS3 Slideshow with Image Panning and zooming Effect

Author:
vavik
Created:
NOVEMBER 22, 2015
Made with:
HTML, CSS
Demo Image: Greensock animated slideshow

Greensock animated slideshow

A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax. This is work in progress, currently working on how to best pevent the slidein animations from firing when users click the next/prev button repeatedly.

Author:
Arden
Created:
NOVEMBER 28, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Automatic / Manual Slideshow

Automatic / Manual Slideshow

Automatic Jquery Slideshow that switch to manual when you hit the arrows.

Author:
Tim
Created:
MARCH 18, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Fading Slideshow

Fading Slideshow

A slideshow that fades on the transition.

Author:
Cliff Pyles
Created:
AUGUST 05, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Slick Slideshow with blur effect

Slick Slideshow with blur effect

Slick Slideshow with blur effect

Author:
Fabio Ottaviani
Created:
JANUARY 19, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Fullscreen CSS Background Image Slideshow

Fullscreen CSS Background Image Slideshow

Taking advantage of Sass with Bourbon, and refactored the original Codrops demo of a Fullscreen Background Image Slideshow to be a little more compact and efficiently managed.

The markup for the slideshow is an unordered list that houses spans which will function as the elements for the background images of the slideshow.

A variable, $animation-delay, is defined as the duration of each slide. This variable will be used to calculate the slideshow's cycle, and makes adding and removing slides a little more manageable.

The first instance of the variable is found tied to the spans that define the background images for each slide. Here, the variable should be multiplied by the total number of slides in the slideshow to set the full length of the cycle.

Where the background images for each span of the slideshow are defined, the variable is further used to set the delay for each slide and ensure that a continuous cycle is created.

Keyframe steps also need to be calculated based on the total number of slides and slide duration. First, divide slide duration by the total cycle time. The resulting percentage will be the base step, and where in the animation the image will begin to fade. An 'in-between' step is also needed preceding the base step, and is calculated by dividing the base step percentage by 2. This step is where the image will be completely shown. Finally, the step at which the image is to disappear completely will be following the base step, and is calculated by multiplying the base step by 1.5.

Author:
Kevin Lesht
Created:
date
Made with:
HTML, CSS
Demo Image: Dual Slideshow Demo

Dual Slideshow Demo

Just playing around with a dual pane slideshow concept.

Author:
Jacob Davidson
Created:
APRIL 17, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: A better simple slideshow

A better simple slideshow

This is fairly basic slideshow, written in javascript, html, and css. This is a dual-purpose project, it’s meant (1) to be something you can drop right into your page and use if you so choose, but it’s also meant (2) as an example/tutorial showing you how to build a simple DIY slideshow from scratch on your own.

Author:
Mark Lee
Created:
OCTOBER 05, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Scroll Down Slideshow

Scroll Down Slideshow

The essential of it could be made using html/css only but the css attr function doesn't support custom datatypes currently, to use it as an url. This slideshow supports permalinks with anchors. Basic keyboard support (left and right arrow keys).

Author:
Bali Balo
Created:
MAY 12, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: A simple slideshow made in css only

Slideshow using CSS only

A simple slideshow made in css only

Author:
Natalie Nordstrm
Created:
JUNE 24, 2015
Made with:
HTML, CSS
Demo Image: Split Slick Slideshow

Split Slick Slideshow

Vertical slideshow in split screen

Author:
Fabio Ottaviani
Created:
MARCH 24, 2017
Made with:
HTML, CSS and JavaScript

Advertisement