In web design terminology, the term Slider is used for a slideshow added to a website. Sliders can improve the look of your web page, especially if you want to show the important content of your website.

We’ll go through four kinds of slideshows, and you can later decide which one can fit your web page.
- Simple Slideshow
- Automatic Slideshow
- Slideshow gallery
- jQuery Slideshow
SIMPLE SLIDESHOW
To learn how to create a simple responsive slideshow with CSS and JavaScript follow the steps below:
To see the live output on the website click here.
Step1.
Add HTML
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://lenadesign.org/wp-content/uploads/2020/02/functions.jpg" style="100%">
<div class="text">Hello!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://lenadesign.org/wp-content/uploads/2019/12/untitled1-1.gif" style="100%">
<div class="text">You can write your text here!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://lenadesign.org/wp-content/uploads/2019/12/javascript.jpg" style="100%">
<div class="text">:D</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Step2.
Add CSS
body {font-family: Verdana, sans-serif; margin:0}
img {vertical-align: middle;}
.slideshow-container {
position: relative;
width: 640px;
height: 480px;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #333;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #333;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Step3.
Add JavaScript
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
To see the live output on the website go to: lenastanley.com
AUTOMATIC SLIDESHOW
To see the live output click here.
To learn how to create an Automatic responsive slideshow with CSS and JavaScript follow the steps below:
Step1.
Add HTML
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://lenadesign.org/wp-content/uploads/2021/01/window-winter-view.jpg" style="width:auto">
<div class="text">Hello!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://lenadesign.org/wp-content/uploads/2021/05/window-rain.jpg" style="width:auto">
<div class="text">You can tape your text here.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://lenadesign.org/wp-content/uploads/2020/04/CSS-Day-and-Night.jpg" style="width:auto">
<div class="text">:D</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
Step2.
Add CSS
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
.slideshow-container {
width:640px;
height: 480px;
position: relative;
margin: auto;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
Step3.
Add JavaScript
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 3000); // Change image every 3 seconds
}
To see the live output go to: lenastanley.com
SLIDESHOW GALLERY
To see the live output on the website click here.
To learn how to create a responsive Slideshow gallery with CSS and JavaScript follow the steps below:
Step1.
Add HTML
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://lenadesign.org/wp-content/uploads/2021/05/planet-with-moon.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://lenadesign.org/wp-content/uploads/2021/05/soloar-system.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://lenadesign.org/wp-content/uploads/2021/05/cssSaturn.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://lenadesign.org/wp-content/uploads/2021/02/blog-rocket.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://lenadesign.org/wp-content/uploads/2021/05/earth-day.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://lenadesign.org/wp-content/uploads/2020/03/space.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/05/planet-with-moon.jpg" style="width:auto" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/05/soloar-system.jpg" style="width:auto" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/05/cssSaturn.jpg" style="width:auto" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/02/blog-rocket.jpg" style="width:auto" onclick="currentSlide(4)">
</div>
<div class="column">
<img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2021/05/earth-day.jpg" style="width:auto" onclick="currentSlide(5)">
</div>
<div class="column">
<img class="demo cursor" src="https://lenadesign.org/wp-content/uploads/2020/03/space.jpg" style="width:auto" onclick="currentSlide(6)">
</div>
</div>
</div>
Step2.
Add CSS
body {
font-family: Arial;
margin:0;
}
img {
vertical-align: middle;
}
.container {
position: relative;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 16.66%;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
Step3.
Add JavaScript
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
To see the live output on the website go to: lenastanley.com
JQUERY SLIDESHOW
To see the live output on the website click here.
To learn how to create a jQuery Slideshow follow the steps below:
Step1.
Add HTML
<div id="slideshow">
<div>
<img src="https://lenadesign.org/wp-content/uploads/2020/07/css-ice-cream.jpg">
</div>
<div>
<img src="https://lenadesign.org/wp-content/uploads/2020/02/css-doughnut.jpg">
</div>
<div>
<img src="https://lenadesign.org/wp-content/uploads/2021/03/happy-new-year-blog.jpg">
</div>
</div>
Step2.
Add CSS
#slideshow {
margin: 40px auto;
position: relative;
width: 640px;
height: 480px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
Step3.
Add jQuery
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(50)
.next()
.fadeIn(50)
.end()
.appendTo('#slideshow');
}, 2000);
slideshow.startSlideshow();
}(jQuery));
To see the live output on the website go to: lenastanley.com.
Enjoy coding!
Read also:
CSS Bouncing Envelope / Contact Animation
CSS & JavaScript Bee Progress Bar