By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
Notification Show More
Latest News
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Create a Non-duplicated Collection
JavaScript Problem: Using Set to Create a Non-duplicated Collection
JavaScript
Aa
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > HTML & CSS > How to Make Automatic Image Slider in JavaScript
HTML & CSSJavaScript

How to Make Automatic Image Slider in JavaScript

Admin
Last updated: 2023/01/31 at 4:53 PM
Admin
Share
10 Min Read
Automatic image slider in html css

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 stepStep:1 Creating a New ProjectStep:2 create the backgroundStep:3 Add image to sliderStep:4 Set Image SizeStep:5 Add Next and prev buttonsStep:6 Activate Image Slider Using JavascriptAutomatic 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:

Automatic image slider in HTML CSS 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:

Automatic image slider in HTML CSS 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:

Automatic image slider in HTML CSS 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:

Automatic image slider in HTML CSS 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);

You may also like:

  • How To Make Number Guessing Game JavaScript
  • Build a Simple Number Memorising Game In JavaScript
  • Build a Simple Digital Clock In JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: Automatic Image Slider
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article python QR code generator How To Make Python QR Code Generator
Next Article Rock Paper Scissors Python How To Make Rock Paper Scissors Python Game 2022
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Passing a JavaScript Value Between HTML Pages

Passing a JavaScript Value Between HTML Pages

February 3, 2023
Compare Objects in an Array

JavaScript Problem: Compare Objects in an Array

January 30, 2023
Switching Name Order Using Capturing Groups in Regular Expressions

Switching Name Order Using Capturing Groups in Regular Expressions

January 29, 2023
Shuffling an Array

JavaScript Problem: How to Perform Shuffling an Array

January 27, 2023
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?