In this article, we will learn how to create an automatic image slider in JavaScript with Both Auto-play and Manual Navigation. Manual navigation is with buttons, and you can navigate to any slide using these buttons. Autoplay navigation is automatically changing slides due to a timer set by using JavaScript.

Contents

What is the Automatic image slider?What should you know before you start?How to create an automatic image slider in HTML CSS step by step Step:1 Creating a New Project Step:2 create the background Step:3 Add image to slider Step:4 Set Image Size Step:5 Add Next and prev buttons Step:6 Activate Image Slider Using Javascript Automatic Image Slider in HTML CSS, and Javascript [ Source Code]You may also like:

A slider is a web element that can be used on many websites. This slider can be used to store multiple types of images in one website. The slider can change the image automatically. You can also use these buttons to manually change the image. we are going to create a simple responsive automatic image slider in HTML CSS.

What is the Automatic image slider?

In short, an image slider is a way to display images or text that continuously slide from one slide to the other to display its content. in this automatic image, slider users do not need to change images manually.

What should you know before you start?

HTML
CSS
JavaScript

DEMO

How to create an automatic image slider in HTML CSS step by step

Creating a New Project
create the background
Add image to the slider
Set Image size
Add Next and prev buttons
Activate Image Slider Using Javascript

Step:1 Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css, index.js) for creating an awesome automatic image slider in HTML CSS. In the next step, we will start creating the structure of the webpage.

Step:2 create the background

First, I created a box using the HTML code and CSS code below. In this example, I used the height 265 pixels and the Width 500 pixels. You can increase the size of the image slider. Here we use shadow around the box using box-shadow.

<div id="slider">

 </div>

body {
  margin: 10%;
}

#slider {
  position: relative;
  width: 500px;
  height: 265px;

  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

Output:

Step:3 Add image to slider

Now we will add the images in that box. In this case, we have used five images. You can use many images if you want.

<ul id="slideWrap"> 
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <li><img src="images/img4.jpg" alt=""></li>
            <li><img src="images/img5.jpg" alt=""></li>
</ul>

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
  float: left;
}

Output:

Step:4 Set Image Size

The slider is not displaying the images correctly, as you can see from the above image. Because the image’s size is greater than the slider’s frame.

For this, we will Set the image size according to the size of the frame of the slider. Remember that if you change the size of the frame, you will change the same here.

#slider ul li img{
  width: 500px;
  height: 265px;
}

Output:

Step:5 Add Next and prev buttons

we add Two buttons in the slider. One button will move the image forward, while the other will push it back. one button on the left side and the other button on the right side. These buttons were created using the codes below.

<a id="prev" href="#">&#8810;</a>
<a id="next" href="#">&#8811;</a>

#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
  transition: all 150ms ease;
}
#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}

Output:

Step:6 Activate Image Slider Using Javascript

Now we designed this image slider. Now we will implement the image change with the help of JavaScript.

First of all we have determined a Variable of each element here.

var slider = document.getElementById("slider");
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById("slideWrap");
var count = 1;
var items = slideList.querySelectorAll("li").length;
var prev = document.getElementById("prev");
var next = document.getElementById("next");

Now Make Slider Responsive using the below code

window.addEventListener('resize', function() {
  sliderWidth = slider.offsetWidth;
});

Now we create a new function is nextSlide. when we click on the Next button then this function call.

function nextSlide(){
if(count < items) {
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
  else if(count = items) {
    slideList.style.left = "0px";
    count = 1;
  }
}

First, we added value if (count <items) this code will work when the amount of images is more than the count. Using else if (count = items) If both the image and the count are equal then there will be no change in the slider.

‘count’ is the number of times you clicked on the button. If you click on that button once, the value of the count is one. If you click three times at once, the value of the count is 3.

Now implement the prev button. here we create another new function which is prevSlide. when we click on the previous button then this function call.

function prevSlide(){
if(count > 1) {
    count = count - 2;
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
  else if(count = 1) {
    count = items - 1;
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
}

Now We add an event listener on these two buttons(prev and next)

next.addEventListener("click", function() {
  nextSlide();
});

prev.addEventListener("click", function() {
  prevSlide();
});

Now make this image slider automatic using javascript inbuilt setInterval function.

setInterval(function() {
  nextSlide()
}, 5000);

here we set 5000 here for five seconds to change the pictures. If you want the image to change as quickly as 2 seconds, use 2000 instead of 5000.

Automatic Image Slider in HTML CSS, and Javascript [ Source Code]

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Automatic Image Slider HTML, CSS and JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="slider">
        <ul id="slideWrap"> 
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <li><img src="images/img4.jpg" alt=""></li>
            <li><img src="images/img5.jpg" alt=""></li>
        </ul>
        <a id="prev" href="#">&#8810;</a>
        <a id="next" href="#">&#8811;</a>
    </div>
    <script src="index.js"></script>
</body>
</html>

style.css

body {
    margin: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #slider {
    position: relative;
    width: 500px;
    height: 265px;
  
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  }
  #slider ul {
    position: relative;
    list-style: none;
    height: 100%;
    width: 10000%;
    padding: 0;
    margin: 0;
    transition: all 750ms ease;
    left: 0;
  }
  #slider ul li {
    position: relative;
    height: 100%;
    float: left;
  }
  #slider ul li img{
    width: 500px;
    height: 265px;
  }
  #slider #prev, #slider #next {
    width: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    text-decoration: none;
    position: absolute;
    top: 50%;
    border-radius: 50%;
    font-size: 2rem;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-50%);
    transition: all 150ms ease;
  }
  #slider #prev {
    left: 10px;
  }
  #slider #next {
    right: 10px;
  }
  
  #slider #prev:hover, #slider #next:hover {
    background-color: rgba(0, 0, 0, 0.5);
    text-shadow: 0;
  }

index.js

var slider = document.getElementById("slider");
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById("slideWrap");
var count = 1;
var items = slideList.querySelectorAll("li").length;
var prev = document.getElementById("prev");
var next = document.getElementById("next");

window.addEventListener('resize', function() {
    sliderWidth = slider.offsetWidth;
});

function nextSlide(){
    if(count < items) {
        slideList.style.left = "-" + count * sliderWidth + "px";
        count++;
      }
      else if(count = items) {
        slideList.style.left = "0px";
        count = 1;
      }
}

function prevSlide(){
    if(count > 1) {
        count = count - 2;
        slideList.style.left = "-" + count * sliderWidth + "px";
        count++;
      }
      else if(count = 1) {
        count = items - 1;
        slideList.style.left = "-" + count * sliderWidth + "px";
        count++;
      }
}

next.addEventListener("click", function() {
    nextSlide();
});
  
prev.addEventListener("click", function() {
    prevSlide();
});

setInterval(function() {
    nextSlide()
}, 5000);