Collection of free HTML and CSS slideshow code: simple, responsive, animated, horizontal, vertical and etc. Update of June 2018 collection. 5 new example.
Table Of Contents
Related Articles
Vertical Slideshows
Links
Made with
- HTML
- CSS
- JavaScript/Babel
About the code
Slideshow Vanilla JS
Custom slideshow with staggered transitions. Built in vanilla JS.
Links
Made with
- HTML
- CSS/SCSS
About the code
Untitled Slider
A small experiment which quickly turned into something more.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (jQuery.js)
About the code
Parallax Slideshow
HTML, CSS and JS slideshow with parallax effect.
Split Slick Slideshow
Vertical slideshow in split screen.
Made by Fabio Ottaviani
March 29, 2017
Slideshow Presentation
Navigate using the up and down arrow keys.
Made by Keith Driessen
March 9, 2016
Dual Slideshow
Just playing around with a dual pane slideshow concept.
Made by Jacob Davidson
April 17, 2015
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
Horizontal Slideshows
Links
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: -
Links
Made with
- HTML / CSS
About the code
Rotating Background Image Slideshow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
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: -
Links
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.
Links
Made with
- HTML
- CSS
- JavaScript (anime.js)
About the code
Geometrical Birds - Slideshow
83 triangles morphing and changing color into different birds.
Links
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.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jQuery.js, TweenMax.js)
About the code
Slideshow Parallax
Slideshow Parallax with TweenMax.js
Split-Screen Slideshow
HTML, CSS and JavaScript split-screen slideshow.
Made by Sean Free
January 9, 2017
Only CSS Slideshow Effect
Ken Burns slideshow effect CSS only.
Made by Dima
December 12, 2016
Slick Slideshow With Blur Effect
Slideshow with blur effect in HTML, CSS and JavaScript.
Made by Fabio Ottaviani
November 11, 2016
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
TweenMax Slideshow
A customizable slideshow TweenMax.
Made by Matheus Verissimo
August 28, 2016
Nautilus Slideshow
Nautilus slideshow with HTML, CSS and JavaScript.
Made by Nikolas Payne
March 9, 2016
Greensock Animated Slideshow
A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax.
Made by Arden
December 12, 2015
Full Page Slideshow
Full page slide show based off of Jonathan Snook's tutorial found at http://snook.ca/archives/javascript/simplest-jquery-slideshow.
Made by webinyoureyes
February 10, 2015