How To Create a Responsive Image Slider In HTML

KarunaSinghJune 2, 2021

0 105 5 minutes read

Easy way to create a responsive Image Slider using HTML CSS and JavaScript

Hello friends, welcome to blogEarns. In this post we will learn how to create an automatic and manual image slider using HTML CSS and JavaScript. This image slider can be used to beautify your blog post by adding it at the top of the post or anywhere as per your requirement.

Prints4sure.com appears to be a company specializing in creating personalized wall art. They offer custom canvas prints and photo collages, allowing you to turn cherished memories or favorite images into stunning home decor. Their service seems to cater to transforming your ideas into reality, whether it’s a collage capturing life’s journeys or a single image that holds special meaning.

In this post we will learn two different styles of Image Slider which is as follows:

Automatic Image Slider
Clickable Image Slider

Let’s start with clickable Image Slider first…

#1. On-Click Image Slider

Image Slider is nothing but a Slideshow which is used to cycle through elements (in our case elements are Images) available.

For creating on-click Image Slider we will use HTML, CSS, and JavaScript.

HTML Code

Below is the HTML code, with this code we will design our Image slider interface. You can change this code to design as per your requirement. Here I am only focusing on Image Slider interface. In the code below you need to put image address (img src=”image.jpg”) only. I took five images in my Image Slider code, you can take as many as you want, but don’t forget to make required changes. Copy the given code and paste it to your code editor and save it with an extension dot html (filename.html).

<div class="slider-box">
<div class="slider fade">
  <div class="numIndicator">1 / 5</div>
  <img src="" style="width:100%" alt="ImageSlide1">
  <div class="text">Caption Text</div>
</div>
<div class="slider fade">
  <div class="numIndicator">2 / 5</div>
  <img src="" style="width:100%" alt="ImageSlide2">
  <div class="text">Caption Two</div>
</div>
<div class="slider fade">
  <div class="numIndicator">3 / 5</div>
  <img src="" style="width:100%" alt="ImageSlide3">
  <div class="text">Caption Three</div>
</div>
<div class="slider fade">
  <div class="numIndicator">4 / 5</div>
  <img src="" style="width:100%" alt="ImageSlide4">
  <div class="text">Caption Four</div>
</div>
<div class="slider fade">
  <div class="numIndicator">5 / 5</div>
  <img src="" style="width:100%" alt="ImageSlide5">
  <div class="text">Caption Five</div>
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</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>
  <span class="dot" onclick="currentSlide(4)"></span> 
  <span class="dot" onclick="currentSlide(5)"></span>  
</div>

CSS Code

To design Image Slider interface we need to write some CSS code. CSS is nothing but Cascading Style sheet. We use CSS to manipulate DOM using html elements, by ID, or by class. You just copy this code and paste it to your project stylesheet.

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.slider {display: none}
img {vertical-align: middle;}

.slider-box {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  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: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numIndicator {
  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}
}

JavaScript Code

So far we are done with our HTML and CSS code. Upto this we have completed creation of Interface using HTML code and designed Image Slider using CSS code. Now its time to start sliding of Images for that we need to write some JavaScript code which is as follows:

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("slider");
  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";
}

Output – Clickable Image Slider

Check out the output of what we’ve done so far. At either end, there is previous and next indicator, clicking it will slide the previous and next image respectively

1 / 5

ImageSlide1

Caption Text

2 / 5

ImageSlide2

Caption Two

3 / 5

ImageSlide3

Caption Three

4 / 5

ImageSlide4

Caption Four

5 / 5

ImageSlide5

Caption Five

❮
❯

#2. Automatic Image Slider Using HTML CSS and JavaScript

Automatic Image Slider is a Image slider in which images with slide one by one automatically. Automatic Image Slider is much more similar to on-click Image Slider only few changes are there which you can notice very easily. In this automatic image slider image will change after every seconds, you can change the time by changing the script’s setTimeout function (2000 refers to 2 seconds). So, let’s start with HTML code for automatic image slider.

HTML Code

Copy the HTML code below and paste it into your html project block.

<div class="autoSlide-box">
<div class="autoSlides fade">
  <div class="slideNum">1 / 3</div>
  <img src="" style="width:100%">
  <div class="cap">Caption Text</div>
</div>
<div class="autoSlides fade">
  <div class="slideNum">2 / 3</div>
  <img src="" style="width:100%">
  <div class="cap">Caption Two</div>
</div>
<div class="autoSlides fade">
  <div class="slideNum">3 / 3</div>
  <img src="" style="width:100%">
  <div class="cap">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
  <span class="doot"></span> 
  <span class="doot"></span> 
  <span class="doot"></span> 
</div>

CSS Code

Copy the CSS code below and paste it into the style block of your project.

.autoSlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.autoSlide-box {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

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

/* Number text (1/3 etc) */
.slideNum {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.doot {
  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;
}

/* Fading animation */
.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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

JavaScript Code

So far we completed HTML and CSS part of the automatic image slider. Now add JavaScript code to make the project functional. Copy the JavaScript code below:

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("autoSlides");
  var dots = document.getElementsByClassName("doot");
  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, 2000); // Change image every 2 seconds
}

Output Automatic Image Slider

See below how the automatic Image Slider works.

1 / 3

Caption Text

2 / 3

Caption Two

3 / 3

Caption Three

Conclusion

Hey guys, I hope you now understand the concept of On-click and automatic Image slider. If you have any query regarding this feel free to write in the comment or you can mail me karunasingh@blogearns.com

KarunaSinghJune 2, 2021

0 105 5 minutes read