Image Slider creation using JavaScript.

IMAGE SLIDER IN JAVASCRIPT

We have designed a Image slider using JavaScript Code. We have use different images that will cover screen after some specific time. So we hope you will like this code.

PROGRAM SOURCE CODE : -

1) HTML Coding :

<!DOCTYPE html>
<html>
<head>
    <title>Indian Player Images</title>
    <link rel="stylesheet" type="text/css" href="Slider.css">

</head>
<body>
    <div class="main">
            <img src="ST.jpg" id="first">
    </div>
    <script type="text/javascript" src="Slider.js"></script>
</body>
</html>

2) CSS Coding :

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.main{
    width: 100vw;
    height: 100vh;
}
img{
    width: 100%;
    height: 100%;
}

3) JavaScript Coding :

var arr = ["ST.jpg", "SG.jpg", "RD.jpg", "VVS.jpg", "VS.jpg", "MD.jpg"];


var i = 0;


function slider() {
    document.getElementById('first').src =  arr[i];

    if (i < (arr.length - 1)) {
        i++;
    } else {
        i = 0;
    }
}

setInterval(slider, 2000);