W3.CSS Colors
Web building, w3.css slideshow.
Manual Slideshow
Displaying a manual slideshow with W3.CSS is very easy.
Just create many elements with the same class name:
JavaScript Explained
First, set the slideIndex to 1. (First picture)
Then call showDivs() to display the first image.
When the user clicks one of the buttons call plusDivs() .
The plusDivs() function subtracts one or adds one to the slideIndex.
The showDiv() function hides ( display="none" ) all elements with the class name "mySlides", and displays ( display="block" ) the element with the given slideIndex.
If the slideIndex is higher than the number of elements (x.length), the slideIndex is set to zero.
If the slideIndex is less than 1 it is set to number of elements (x.length).
Advertisement
Automatic Slideshow
To display an automatic slideshow is even simpler.
You only need a little different JavaScript:
HTML Slides
The slides do not have to be images.
They can be any HTML content:
Lorem ipsum
Slideshow caption.
Add a caption text for each image slide with the w3-display-* classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right or middle):
Slideshow Indicators
An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.
Another example:
Images as Indicators
An example of using images as indicators:
Multiple Slideshows on the Same Page
To operate multiple slideshows on one page, you must class the members of each slideshow group with different classes:
Animated Slides
Slide or fade in an element from the top, bottom, left or right of the screen with the w3-animate-* classes.
Faded Animation
The w3-animate-fading class fades an element in and out (takes about 10 seconds).
COLOR PICKER
Contact Sales
If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]
Report Error
If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]
Top Tutorials
Top references, top examples, get certified.
25+ CSS Slideshows
Slideshows are a popular way of presenting images, videos, or other content on a web page. They can be used for various purposes, such as showcasing a portfolio, displaying testimonials, highlighting products, or telling a story . Slideshows can also enhance the visual appeal and interactivity of a web page, as they can include animations, transitions, effects, and user controls .
However, creating a slideshow from scratch can be challenging and time-consuming, especially if you want to make it responsive, accessible, and compatible with different browsers and devices. Fortunately, there are many free and open-source CSS slideshow code examples that you can use as a starting point or inspiration for your own projects. These examples demonstrate the power and versatility of CSS, as they can create stunning slideshows with minimal HTML and JavaScript.
In this article, we will showcase some of the most creative and beautiful CSS slideshow code examples from CodePen, GitHub , and other resources. We will also provide a brief description of each example, as well as the link to the source code and the live demo. These examples are updated as of November 2021 collection, and include 4 new items .
Related Articles
- jQuery Slideshows
- Ryan Mulligan
- January 24, 2020
- demo and code
- HTML / CSS (SCSS)
About a code
Doggie screensaver.
Pretty hacky attempt at recreating the floating screensaver for the photo gallery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
- December 5, 2019
CSS Slideshow
- Riley Adair
- January 1, 2018
- JavaScript/Babel
About the code
Slideshow vanilla js.
Custom slideshow with staggered transitions. Built in vanilla JS.
- Nathan Taylor
- December 16, 2017
Untitled Slider
A small experiment which quickly turned into something more.
- Bruno Carvalho
- December 5, 2017
- JavaScript/Babel (jQuery.js)
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
- Johan Lagerqvist
- December 24, 2018
CSS-only Slideshow
An idea for a page header slideshow.
- November 30, 2018
Rotating Background Image Slideshow
- VERDIEU Steeve
- November 18, 2018
Slideshow with HTML/CSS
Slideshow made with HTML/CSS. Any javascript code is used.
Responsive: no
- Jefferson Lam
- October 8, 2018
Spooky Scary Clip Text
Spooky CSS only image slideshow with text clipping.
Compatible browsers: Chrome, Firefox, Opera, Safari
- Peter Butcher
- July 1, 2018
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.
- Mikael Ainalem
- January 15, 2018
- HTML + SVG / CSS / JavaScript
Silhouette Zoom Slideshow
Slide show where the person in the current frame is used to zoom into the next frame.
- October 17, 2017
- JavaScript (anime.js)
Geometrical Birds - Slideshow
83 triangles morphing and changing color into different birds.
- June 17, 2017
- CSS/PostCSS
- JavaScript (Vue.js)
Bubble Slideshow Component
This is a Vue component that uses clip-path for an interesting slideshow transition effect.
- April 19, 2017
- JavaScript (jQuery.js, TweenMax.js)
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
- Just another Chris
- October 21, 2016
- HTML (Pug) / CSS (SCSS)
3-D Split Image Slideshow
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
- Joshua Mitchell
- July 1, 2014
Retro CSS Slideshow
Made with pure CSS.