Get hand-picked CSS slideshow collections. Demos and Tutorial links are available.
1) Slideshow Owl Carousel + YouTube
Demo Image: Slideshow Owl Carousel + YouTube
Slideshow Owl Carousel + YouTube
Author: Pierre Vion Created: SEPTEMBER 14, 2015 Made with: HTML, CSS and JavaScript
2) Responsive Multi-image Slideshow
Demo Image: 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
3) Responsive Vanilla JS Slideshow
Demo Image: 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
4) Slideshow 3d showcase
Demo Image: 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
5) Slideshow presentation
Demo Image: Slideshow presentation Navigate using the up and down arrow keys.
Author: Something Strange Created: MARCH 09, 2016 Made with: HTML, CSS and JavaScript
6) Split-screen Slideshow
Demo Image: Split-screen Slideshow Split-screen Slideshow
Author: Sean Free Created: JANUARY 02, 2017 Made with: HTML, CSS and JavaScript
7) Pure CSS Slideshow Gallery
Demo Image: 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
8) Geometrical Birds - slideshow
Demo Image: 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
9) Parallax Slideshow
Demo Image: Parallax Slideshow Parallax Slideshow with arrow and auto slideshow
Author: Bruno Carvalho Created: DECEMBER 04, 2017 Made with: HTML, CSS and JavaScript
10) Bubble Slideshow Component
Demo Image: 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
11) Silhouette zoom slideshow
Demo Image: 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
12) Responsive slideshow with Tabs
Demo Image: Slideshow with Tabs A full-width, responsive and easy to customize slideshow.
Author: dedevillela Created: MAY 21, 2015 Made with: HTML, CSS and JavaScript
13) Slideshow Parallax with TweenMax
Demo Image: Slideshow Parallax with TweenMax Slideshow Parallax with TweenMax
Author: Bruno Carvalho Created: APRIL 19, 2017 Made with: HTML, CSS and JavaScript
14) Fullscreen slideshow with menu
Demo Image: 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
15) Simple Image Slider
Demo Image: 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
16) Automatic infinite slideshow with jQuery
Demo Image: 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
17) Cycle Slideshow Slider
Demo Image: 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
18) SlideShow Animated
Demo Image: SlideShow Animated SlideShow using javascript and css .
Author: Manu K Created: MARCH 27, 2018 Made with: HTML, CSS and JavaScript
19) Slideshow in a button
Demo Image: 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
20) Mobile First Product Slideshow Widget
Demo Image: 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
21) Table Cell Slideshow
Demo Image: 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
22) Slideshow CSS with image preview
Demo Image: 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
23) Basic HTML Slideshow
Demo Image: 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
24) Slideshow Concept (No JS)
Demo Image: Slideshow Concept (No JS) CSS and HTML Only Slideshow Concept
Author: Peter Butcher Created: JULY 01, 2018 Made with: HTML, CSS
25) Responsive Slideshow Concept
Demo Image: 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
26) CSS Infinite Slideshow
Demo Image: CSS Infinite Slideshow CSS Infinite Slideshow
Author: Chris Coyier Created: MAY 27, 2016 Made with: HTML, CSS
27) ScrollMagic Tutorial – Fullscreen Slideshow
Demo Image: 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
28) Vanilla JS Lightbox Slideshow
Demo Image: Vanilla JS Lightbox Slideshow A simple vanilla js lightbox slideshow script
Author: Arden Created: SEPTEMBER 26, 2017 Made with: HTML, CSS and JavaScript
29) CSS Slideshow text
Demo Image: CSS Slideshow text CSS Slideshow text
Author: Joan Leon Created: APRIL 28, 2014 Made with: HTML, CSS
30) CSS3 Slideshow with Image Panning and zooming Effect
Demo Image: 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
31) Greensock animated slideshow
Demo Image: 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
32) Automatic / Manual Slideshow
Demo Image: 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
33) Fading Slideshow
Demo Image: Fading Slideshow A slideshow that fades on the transition.
Author: Cliff Pyles Created: AUGUST 05, 2013 Made with: HTML, CSS and JavaScript
34) Slick Slideshow with blur effect
Demo Image: Slick Slideshow with blur effect Slick Slideshow with blur effect
Author: Fabio Ottaviani Created: JANUARY 19, 2016 Made with: HTML, CSS and JavaScript
35) Fullscreen CSS Background Image Slideshow
Demo Image: 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
36) Dual Slideshow Demo
Demo Image: 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
37) A better simple slideshow
Demo Image: 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
38) Scroll Down Slideshow
Demo Image: 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
39) Slideshow using CSS only
Demo Image: A simple slideshow made in css only A simple slideshow made in css only
Author: Natalie Nordstrm Created: JUNE 24, 2015 Made with: HTML, CSS
40) Split Slick Slideshow
Demo Image: Split Slick Slideshow Vertical slideshow in split screen
Author: Fabio Ottaviani Created: MARCH 24, 2017 Made with: HTML, CSS and JavaScript
