How to make simple image changer with html css and javascript

In this blog we make simple Image changer using HTML , CSS , Javascript. I'm sure you may have seen image changer on many website. Some are automatic, some are slide by buttons.

In this post we going to make automatic image changer, which have counter that shows the current number of image which is showing right now and total number of image in image changer. And also have functionality to pause the imagechanger whenever you take the cursor on image and resume when you move out the cursor from image.

You can use any code editior , here i am using visual studio code editor. So, in this image slider i use five images you can use more also, which are initially set to display : none (css) and for automatic image changing we use set time interval (javascript function).

So i Created one folder with name images and two files index.html and index.css or whatever name you want. Link stylesheet to .html file .

First i added div tag with classname of main_box and div tag with classname images .

HTML

    <div class="main_box">
        <div class="images">
           
        </div>
    </div>

Than added css for styling :

CSS

*{
    padding: 0;
    margin: 0;
}

.main_box{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
}
.images{
    width: 950px;
    height: 550px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    transition: 0.3s;
}
.images:hover{
    width: 900px;
    height: 500px;
}

Now i have added img tag with classname of image in div tag with classname images that i created above.
And added images inside the img tag. here i added 5 images.
then i have added another div tag with classname dots below the image classnames.
Then inside the div tag with dots classname i added other 5 div tag with classnames dot (because i added 5 images, so one dot for one image), but its not visible, because height, width and backgroundcolor is not given to dot.
height, width and backgroundcolor of classname dot is given in javascript . So it only visible after javascript is added.

HTML
            <img class="image" src="images/img1.jpg" />
            <img class="image" src="images/img2.jpg" />
            <img class="image" src="images/img3.jpg" />
            <img class="image" src="images/img4.jpg" />
            <img class="image" src="images/img5.jpg" />

            <div class="dots">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>

CSS

.image{
    width: 100%;
    height: 100%;
    position: absolute;
    transition: 0.3s;
}

.dots{
    position: absolute;
    top: 105%;
    left: 50%;
    display: flex;
    transform: translate(-50% , -50%);
}

.dot{
    border-radius: 100px;
    margin: 0px 8px;
    transition: 0.3s;
}

Output :

After adding images and dots. i have added the div tag to show the total number of images and the current image number, that is display in image changer when the image changer is changing images. So i added div tag above the image classname with classname of label and in that i add 2 p tags, one have a classname of current_image and another have total_image.

HTML
<div class="label"><p class="current_image"></p> / <p class="total_image"></p></div>

CSS
.label{
    position: absolute;
    display: flex;
    background-color: #fff;
    border-radius: 100px;
    padding: 5px 8px;
    font-size: 25px;
    z-index: 2;
    margin: 12px;
}
.label p {
    margin: 0px 5px;
}

Output :

Now javascript :

javascript
    let image = document.getElementsByClassName('image');
    let dot = document.getElementsByClassName('dot');
    let current_image = document.querySelector('.current_image');
    let total_image = document.querySelector('.total_image');
    let images = document.querySelector('.images');
    
    startInterval();
    total_image.innerHTML = image.length;
    let s = 0;
    slide();

Now i have used javascript to change the images automatically.
So here first i have define variables, then created a function startInterval(); then added total number of image in classname total_image. Then define variable with name of s for slide() function .
Here in javascript image variable store all classes which have classname image. So by writing image.length, it gives the total number of classes which have classname image (And in image classname their is img tag, so we got the number of images). And this total number of images stores in classname total_image.

Javascript
    function slide(){
        for (let i = 0; i < image.length; i++) {
             image[i].style.opacity = '0';
            
        }
        for (let d = 0; d < dot.length; d++) {
             dot[d].style.backgroundColor = 'rgb(184 , 184 , 184)';
             dot[d].style.width = '20px';
             dot[d].style.height = '20px';
            
        }
        s++;

        if(s > image.length){
            s = 1;
        }
        current_image.innerHTML = s;
        image[s - 1].style.opacity = '1';
        dot[s - 1].style.width = '25px';
        dot[s - 1].style.height = '25px';
        dot[s - 1].style.backgroundColor = '#000';

    }

Now for slide() function , i used for loop that set opacity = 0 to all image and second for loop is for dot that make all dot backgroundColor = 'rgb(184 , 184 , 184)' , width = '20px' , height = '20px' . after for loop the s variable that is define above with value 0, is increment by 1, when slide() function is called.
And that s value is use to know the current image number when image changer is changing images.
And as slide() function is called, the value of s is increment, and by incrementing, if the value of s is greater than 5 than value of s is set to equal to 1.
There is 5 image i have used in this image changer. image[s - 1] means if value of s = 1 then image[0] so, 1st image get style of opacity = 1 because counting start from 0. and if value of s=2 then image[1] then 2nd image get style of opacity = 1. same thing apply to dot[s - 1] also .

Output :

Now lets change image at every 1.5 seconds. So to do that, call slide() function at every 1.5 second with settimeinterval function of javascript. And to pause image changer, I added onmouseover event and to play image changer again onmouseout event is added to images variable or images classname.

Javascript
    function startInterval(){
   let interval = setInterval(() => {
        slide();
    }, 1500);

    images.onmouseover = function(){
        clearInterval(interval);
    }

    images.onmouseout = function(){
        startInterval();
    }
    
    }

Here below is the final code :

Final code :

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>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    
    <div class="main_box">
        <div class="images">
            <div class="label"><p class="current_image"></p> / <p class="total_image"></p></div>
            <img class="image" src="images/img1.jpg" />
            <img class="image" src="images/img2.jpg" />
            <img class="image" src="images/img3.jpg" />
            <img class="image" src="images/img4.jpg" />
            <img class="image" src="images/img5.jpg" />

            <div class="dots">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>

</body>
</html>

CSS
*{
    padding: 0;
    margin: 0;
}

.main_box{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
}
.images{
    width: 950px;
    height: 550px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    transition: 0.3s;
}
.images:hover{
    width: 900px;
    height: 500px;
}

.image{
    width: 100%;
    height: 100%;
    position: absolute;
    transition: 0.3s;
}

.dots{
    position: absolute;
    top: 105%;
    left: 50%;
    display: flex;
    transform: translate(-50% , -50%);
}

.dot{
    border-radius: 100px;
    margin: 0px 8px;
    transition: 0.3s;
}
.label{
    position: absolute;
    display: flex;
    background-color: #fff;
    border-radius: 100px;
    padding: 5px 8px;
    font-size: 25px;
    z-index: 2;
    margin: 12px;
}
.label p {
    margin: 0px 5px;
}

Below code is for javascript :

Javascript
    let image = document.getElementsByClassName('image');
    let dot = document.getElementsByClassName('dot');
    let current_image = document.querySelector('.current_image');
    let total_image = document.querySelector('.total_image');
    let images = document.querySelector('.images');

    startInterval();
    console.log(image.length)
    total_image.innerHTML = image.length;
    let s = 0;
    slide();

    function slide(){
        for (let i = 0; i < image.length; i++) {
             image[i].style.opacity = '0';
            
        }
        for (let d = 0; d < dot.length; d++) {
             dot[d].style.backgroundColor = 'rgb(184 , 184 , 184)';
             dot[d].style.width = '20px';
             dot[d].style.height = '20px';
            
        }
        s++;

        if(s > image.length){
            s = 1;
        }
        current_image.innerHTML = s;
        image[s - 1].style.opacity = '1';
        dot[s - 1].style.width = '25px';
        dot[s - 1].style.height = '25px';
        dot[s - 1].style.backgroundColor = '#000';

    }

    function startInterval(){
   let interval = setInterval(() => {
        slide();
    }, 1500);

    images.onmouseover = function(){
        clearInterval(interval);
    }

    images.onmouseout = function(){
        startInterval();
    }



}

Thats it, a simple imagechanger is ready with pause and resume functionality. If you have any doubt you can comment it below .

How to make simple image changer with html css and javascript

Post a Comment

Contact form

How to make simple image changer with html css and javascript

You may like these posts

Post a Comment

Contact form