Here we will learn to create a responsive slideshow with the help of HTML, CSS and JavaScript. 


How To Create a Slideshow with HTML, CSS and JavaScript ?


Create A  Responsive Slideshow

Responsive Slideshow Example:

1 / 3
Caption First
2 / 3
Caption Second
3 / 3
Caption Third


For this, we will follow the following steps:

Step (1) : We complete this step in the following steps:

  • First we create a div using html and give it a class named slides.
  • Then inside this div we create three div. With the help of these three div we will make three slides.
  • These three div are given the same class and name this class as slide.
  • Then, inside each div of these three div, firstly, we create a div and give it a class called number. Then insert the image through img tag. Then we create a div and give a class called caption.
  • Then we create two a tags and give both these tags next and pre class respectively.
  • Finally, we create a div and inside this div we create three span tags. With the help of these span tags, we will create three dots/circles.
<div class="slides"> <!-- .slides start -->

<!-- First Slide -->
<div class="slide fade">
<div class="number">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="caption">Caption First</div>
</div>

<!-- Second Slide -->
<div class="slide fade">
<div class="number">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="caption">Caption Second</div>
</div>

<!-- Third Slide -->
<div class="slide fade">
<div class="number">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="caption">Caption Third</div>
</div>

<!-- Buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div> <!-- .slides end -->
<br>

<!-- Dots/Circle-->
<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> code-box

Step (2) : In this step we will write CSS code so that the slideshow can be performed better. For this, we will follow the following steps: 
  • First we will style the div on which the slides class is placed.
  • The three div with a class called slide will not display. This will be controlled by JavaScript.
  • After this, the next and previous buttons are styled as per convenience.
  • Then style the caption text, numbers and dots, you can see the entire code below.
/* Style the .slides div */
.slides {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Hide slide by default. We will control this with JavaScript */
.slide {
display: none;
}

/* Style the Next & Prev Buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
text-decoration:none !important;
color: white !important;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Give position next button to right*/
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover background color changed*/
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Style the Caption Text */
.caption {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Style the number */
.number {
z-index: 99;
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* Style the dots/circle */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Animations */
.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}
} code-box

Step (3) : In this step, we write the JavaScript code in the following step:
  • First we create a variable named slideNum and store 1 value in it.
  • Then we pass the variable slideNum to the showSlides function.
  • Now let's create a plusSlides(n) function which helps to move forward and backward in slides.
  • In the next step, let us create a currentSlide(n) function which allows us to control slides with the help of dots.
  • After that we create the showSlides(n) function.
  • Then with the help of  document.getElementsByClassName() method, we store all the elements of the slide class in the variable named slides.
  • Similarly, with the help of document.getElementsByClassName() method, we store all elements of dot class in variable named dots.
  • Now we control the slides with the help of if condition. In the first if condition we apply the condition that when we reach the end of the slides and there is no slide beyond that, it returns us back to the first slide. Similarly, in the second if condition, when we are on the first slide and go back, it takes us to the last slide.
  • In the next step, we hide all the slides with the help of for loop.
  • Let us remove the active class of all dots in the second for loop.
  • In the next step, we display the slide on which we are currently present.
  • Now, in the next step, let's add an active class to the dot related to the slide.
var slideNum = 1;
showSlides(slideNum);

// Next/previous button controls
function plusSlides(n) {
showSlides(slideNum += n);
}

// Slides control with dots
function currentSlide(n) {
showSlides(slideNum = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");

if (n > slides.length) {
slideNum = 1
}

if (n < 1) {
slideNum = 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[slideNum-1].style.display = "block";
dots[slideNum-1].className += " active";
code-box

Create An Automatic Slideshow

An Automatic Slideshow Example:

1 / 3
Caption First
2 / 3
Caption Second
3 / 3
Caption Third

To create an automated slide show, we follow the following steps:
  • Take a variable slideNum and set its value to 0.
  • Then call the function of showSlides().
  • Then we create the function of showSlides().
  • Then in this function, we store all the slide in the variable named slides.
  • Then we hide all the slides through the for loop.
  • Then we increment the slideNum's variable. So that the slider moves automatically according to the time.
  • Now we set condition by an if statement that if the value of slideNum exceeds slides.length then the slider moves to the first slide.
  • In the next step, we display the slide.
  • In the next step, we set the time through the setTimeout() function.
var slideNum = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideNum++;
if (slideNum > slides.length) {slideNum = 1}
slides[slideNum-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
} code-box


Create An Automatic Slideshow With Control Buttons

To create an automatic slideshow with control buttons, we have to look at the JavaScript code for automatic slideshow and slideshow with control buttons. By mixing these two codes, we can create such slideshow very easily. Complete code is given below. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us.
var slideIndex = 0;
showSlides();
var slides,dots;

function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
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, 5000); // Change image every 8 seconds
}

function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<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";
}

function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = 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[index-1].style.display = "block";
dots[index-1].className += " active";
} code-box

Summary

In this post we have learned to create slideshow with the help of HTML, CSS and JavaScript. Also learned to create automatic slideshow and automatic slideshow with control buttons. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post