How to Create an Image Slider using HTML CSS and JavaScript
Tags: html, javascript, webdev, beginners
Published: 2021-11-11 16:33:02

In this article you will learn how to create image sliders using html and css. Earlier I have shared with you the design of many types of automatic and manual image sliders.

 This is a beautiful css image slider design with four images and two navigation buttons to change the images. I took the help of JavaScript to make the navigation button work.

[**Watch its live demo**](https://www.foolishdeveloper.com/2021/10/how-to-create-image-slider-in-html.html) to learn how it works. First I created a box on the webpage. Then I added four images here and used two buttons on each side. Below the images are four indicators or dots to help change the image and indicate the number of open images.

{% youtube HpXWoqWupnY %}

 Here I have used HTML CSS and JavaScript. HTML css helped to design it and add images as needed. Implemented image change using JavaScript.


### Step 1: Create the basic structure of the image slider
I created a box using the HTML and CSS code below. In this box I have added the images and the button to change the image. html image slider `width: 500px` and `height: 350px`.

```html
<div class="container">

</div>
```
```css
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    background: #0690e6;
}

.container{
    background-color: #ffffff;
    width: 500px;
    height: 350px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
```
![Create the basic structure of the image slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at174yljy57ex0ncil7p.jpg)

### Step 2: Add images to the image slider
Now I have added the images in the box. Here I have used four images. I added an active tag to activate the first image. Image `width: 460px` and height: 280px are used. 

Here `display: none` is used which will completely hide the images. Then I added `display: block` which will help to see the images again.

I used 'active' in the case of first images so in this case the first image is seen.
```html
<div class="image-container">
    <img src="img1.jpg" id="content1" class="active">
    <img src="img2.jpg" id="content2">
    <img src="img3.jpg" id="content3">
    <img src="img4.jpg" id="content4">
</div>
```

```css
.image-container{
    position: relative;
}

img{
    position: relative;
    width: 460px;
    height: 280px;
    display: none;
}

.active{
    display: block;
}
```
![Add images to the image slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0s21jeqetdfcy1wgwk44.jpg)
### Step 3: Create indicators for images

Now I have created four dots for four images. If you use more images then you have to increase the amount of dots here. I took the help of buttons to make these. The width of each dot 50px, `height: 15px` and here the background-color is completely transparent.
```html
<div class="dot-container">
   <button onclick = "dot(1)"></button>
   <button onclick = "dot(2)"></button>
   <button onclick = "dot(3)"></button>
   <button onclick = "dot(4)"></button>
</div>
```

```css
.dot-container{
    width: 250px;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

button{
    outline: none;
    cursor: pointer;
}

.dot-container button{
    height: 15px;
    width: 50px;
    border-radius: 10%;
    border: 3px solid #076bb8;
    background-color: transparent;
}

.dot-container button:nth-child(1){
    background-color: #076bb8;
}
```
![Create indicators for images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22pwnc2ov8lurcjib0zc.jpg)
### Step 4: Create two buttons to change the image
Now I have created two buttons to change the image. The width and height of the two buttons are 40px and its `position: absolute`has been used. position: absolute will help to place these buttons in a certain place.
```html
<button id="prev" onclick="prev()"> &lt; </button>
<button id="next" onclick="next()"> &gt; </button>
```

```css
#prev,#next{
    height: 40px;
    width: 40px;
    position: absolute;
    background-color: #076bb8;
    color: #ffffff;
    margin: auto;
    top: 0;
    bottom: 0;
    border: none;
    border-radius: 3px;
    font-size: 18px;
    font-weight: bolder;
}

#prev{
    left: 5px;
}

#next{
    right: 5px;
}
```
![How to Create Image Slider in HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ydtqkfl2v8kbfra5fo7.jpg)

### Step 6: Activate the image slider using JavaScript
Now is the time to implement image changes using JavaScript. Now I have determined the constant of the dot and images.
```javascript
const dots = document.querySelectorAll(".dot-container button");
const images = document.querySelectorAll(".image-container img");
```

```javascript
let i = 0; // current slide
let j = 4; // total slides
```

Now using JavaScript I have executed the Next button. Which will help to see the next image. Here I have implemented it using some basic calculations. If you know JavaScript you can easily understand.
```javascript
function next(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = ( j + i + 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator( i+ 1 );
}
```
Now the Previs button has been activated. When you click on the Preview button, you can see the Preview image.
```javascript
function prev(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = (j + i - 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator(i+1);
}
```
 Now I have activated the indicator. Indicators help to understand which image is open. The indicators will continue to change when you change the image with the help of the buttons.
```javascript
function indicator(num){
    dots.forEach(function(dot){
        dot.style.backgroundColor = "transparent";
    });
    document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#076bb8";
}
```
 Now I have instructed the indicator to change the image. In this html css image slider you can change the image with the help of indicator.
```javascript
function dot(index){
    images.forEach(function(image){
        image.classList.remove("active");
    });
    document.getElementById("content" + index).classList.add("active");
    i = index - 1;
    indicator(index);
}
```
![image slider using JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kbarn1x2b1ocmqfg0sd.jpg)
This is a beautiful and simple image slider design that I created with the help of HTML CSS and JavaScript. If you have any difficulty in creating this design(How to Create Image Slider in HTML), you can definitely let me know in the comments. `Like it if you like this tutorial`.

**Related Post:**
1. [Simple Weather App using JavaScript](https://www.foolishdeveloper.com/2021/12/simple-weather-app-using-javascript.html) 
2. [Make a Todo List using JavaScript](https://www.foolishdeveloper.com/2021/11/todo-list-javascript.html)
3. [Simple Stopwatch using 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. [Random Password Generator with JavaScript](https://www.foolishdeveloper.com/2021/07/random-password-generator-javascript.html)
7. [Automatic Image Slider in Html, CSS](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html) 
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/