1
2 This is Slide 1
3
4
>> <<
6
Timer
My Code Is Below
here is code javascript code.... var arr = ["1.png","2.png","3.png","4.png"]; var ss = document.getElementById("forward"); var count = 0; var im = document.getElementById("mySlider"); var tte = document.getElementById("slTxt"); ss.addEventListener("click",function () { count++; if (count>arr.length-1){ count = 0; } //alert(arr[count]) ; im.src = "img/"+arr[count]; tte.innerText = "This is Slide " + count; }); ss.addEventListener("mouseover",function (event) { ss.style.color = "red" ; }); ss.addEventListener("mouseout",function (event) { ss.style.color = "bisque" ; }); var re = document.getElementById("reverse"); re.addEventListener("click",function () { count--; if (count<0){ count = arr.length-1; } //alert(arr[count]); im.src = "img/"+arr[count]; tte.innerText = "This is Slide " + count; }); re.addEventListener("mouseover",function (event) { re.style.color = "red" ; }); re.addEventListener("mouseout",function (event) { re.style.color = "bisque" ; }); //set auto timer var stop = 0; var timeBtn = document.getElementById("tim"); var slideTimer; timeBtn.addEventListener("click",function () { //Below if() statement is very important if (slideTimer){ clearInterval(slideTimer); } ///////////////////////////////////////// slideTimer = setInterval(tttt,2000); if (stop==0){ //alert("0"); stop = 1; timeBtn.innerText = "Timer On"; timeBtn.style.padding = "5px"; //slideTimer = setInterval(myInterval11,2000); return 0; } if (stop==1){ //alert("1"); timeBtn.innerText = "Timer Off"; timeBtn.style.padding = "5px"; stop = 0; clearInterval(slideTimer); return 0; } }); var tttt = function myInterval11() { count++; if (count > arr.length - 1) { count = 0; } im.src = "img/" + arr[count]; tte.innerText = "This is Slide " + count; };
                Here is my css....

            .grid-container{
                display: grid;
                grid-template-columns: auto auto auto;

            }
            .grid-container > div{
                text-align: center;
                font-size: 35px;
                border: 1px solid gold;
                background-color: bisque;
                padding: 5px;
            }
            .item7, .item8, .item9{
                grid-column-start: 1;
                grid-column-end: 4 ;
            }
            img{
                width: 150px;
                height: 150px;
            }
            #tim{
                text-align: center;
                color: darkgoldenrod;
                background-color: darkkhaki;
                cursor: pointer;
                padding: 2px 2px 2px 2px;
                margin: 5px;
                font-size: 21px;
            }
            #mySlider{
                padding: 10px 10px;
                background-color: black;
                margin-top: 5px;
                margin: 5px 5px;
                border: gold 2px solid;
                //display: inline-block;
            }
            #forward{
                position: relative;
                top: -60px;
                margin: 5px 5px 5px 5px;
                background-color: darkslateblue;
                border: crimson 1px solid;
                color: bisque;
                cursor: pointer;
                padding: 5px;
            }
            #reverse{
                position: relative;
                top: -60px;
                //margin: 5px 5px;
                background-color: darkslateblue;
                border: crimson 1px solid;
                color: bisque;
                cursor: pointer;
                padding: 5px;
            }
            xmp{
                font-size: 12px;
                background-color: aliceblue;
                width: 440px;
                margin: auto;
                text-align: left;
            }
            pre{
                font-size: 14px;
                background-color: aliceblue;
                width: 440px;
                margin: auto;
                text-align: left;
            }