Automatic Image Slider Using Html Css & Javascript
Tags: html, css, javascript, webdev
Published: 2021-07-17 17:35:37

In this article I will show you how to create an [automatic image slider using HTML CSS and JavaScript](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html) code. Earlier I designed many more types of image sliders. If you want, you can create only with the help of HTML and CSS. But in this case I have used JavaScript.

 A slider is a common web element that is used on a variety of websites. This type of slider is basically used to store many types of images together in a website. This slider can automatically change the image. There are also two buttons that can be used to change the image manually.

✅ **Watch Live Preview** 👉👉  [Automatic Image Slider in html css](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html) 

First of all I made a box in a web page. Then I added the image in that box. I have added two buttons to change the images. 

I used JavaScript code to change the image. If you want to know how to make this design then follow the tutorial below. First of all you create an html and css file.

**Related design:**
1. [Automatic image slider](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html)
2. [Manual image sideShow](https://www.foolishdeveloper.com/2021/06/create-image-slider-using-html-css-and.html)
3. [Responsive image slider with Javascript](https://www.foolishdeveloper.com/2021/06/how-to-create-image-slider-using-html.html)


### Step 1: create the background of the slider

I created a box first of all using the HTML and CSS code below. In this case I have used the `height of the box 265 px` and the `width 500 px`. If you want to increase the size of this image slider, you can make the size.
 I have used shadow around this box to create which I have used `box-shadow`.

```html
  <div id="slider">
 
  </div>
```

```css
 body {
  margin: 10%;
}

#slider {
  position: relative;
  width: 500px;
  height: 265px;
 
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
```
 ![create the background of the slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m231p3oar58vlfu8imur.jpg)
### Step 2: Add image to slider
 Now we will add the image in that box. In this case I have used five images. You can use many images if you want.

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


```css

#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;
}
```
![Add image to slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/071cerir7i6vpif1eqf6.jpg)
### Step 3: Determine the size of the image

 As you can see in the picture above, the images are not in the right place in the slider. Because the size of the image is larger than the frame of the slider.

For this we will `determine the size of this image` 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.

```css
#slider ul li img{
  width: 500px;
  height: 265px;
}
```
 ![Determine the size of the image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrdr5i3g0pk8agwhcddd.jpg)
### Step 4: Add Next and prev buttons

I used two buttons in the slide. One button will help move the image forward while the other will help push the image back. I have used the following codes to design those two buttons.

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

```css
#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;
}
```
![Add Next and prev buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9r0l8b6e6419tjp2qhof.jpg)

You must see that there are two button sliders, one on the left and the other on the right. For this I have used the css codes below.

```css
#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;
}
```
![position Next and prev buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4anryy83i9ke4kzyzwxd.jpg)
### Step 5: Activate the image slider using JavaScript
 So far I have only designed this image slider. Now we will implement the image change with the help of JavaScript programming code.

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

```javascript
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;
});
```
I will store in `'prevSlide'` what kind of changes will be made by clicking on the `previous button`.

```javascript
var prevSlide = function() {
  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++;
  }
};
```
I will store in `'nextSlide'` what kind of changes will be made by clicking on the `Next button`.

```javascript
var nextSlide = function() {
  if(count < items) {
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
  else if(count = items) {
    slideList.style.left = "0px";
    count = 1;
  }
};
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fr3pmu8wnefog4e1lx7z.png)
We have determined above what will change if we click on the two buttons. Again, we will add the buttons with that constant, that is, we will activate the buttons.

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

prev.addEventListener("click", function() {
  prevSlide();
});
```
The following code will help to change the `image automatically `at a certain time interval.

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


➤  I have instructed that the condition of nextSlide should be effective every 5 seconds. That means the images will change `every 5 seconds`.

➤  I 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.


```javascript
window.onload = function() {
responsiveSlider();  
}
```
![Activate the image slider using JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7u8djq691dcylwdq0q2.jpg)

### Final JavaScript code

```javascript
var responsiveSlider = function() {

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;
});

var prevSlide = function() {
  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++;
  }
};

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

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

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

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

};

window.onload = function() {
responsiveSlider();  
}
```

Hopefully in the above tutorial I have explained how I made this image slider with the help of HTML CSS and JavaScript. If you have any questions, please let me know in the comments.

**Related Post:**
1. [HTML CSS Footer Design](https://www.foolishdeveloper.com/2021/09/responsive-footer-design.html) 
2. [JavaScript Todo List](https://www.foolishdeveloper.com/2021/11/todo-list-javascript.html)
3. [Simple Stopwatch JavaScript](https://www.foolishdeveloper.com/2021/10/simple-stopwatch-using-javascript.html)
4. [Skeleton Screen Loading Animation](https://www.foolishdeveloper.com/2021/09/skeleton-screen-loading-animation.html)
5. [Javascript Age Calculator](https://www.foolishdeveloper.com/2021/07/javascript-age-calculator.html)
6. [JavaScript Password Generator](https://www.foolishdeveloper.com/2021/07/random-password-generator-javascript.html)
7. [Automatic Background Image Slider](https://groundtutorial.com/automatic-background-image-slider-in-html-css/) 
8. [Sidebar Menu Using HTML CSS](https://www.foolishdeveloper.com/2021/06/sidebar-menu-using-html-css-javascript.html) 

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/