Javascript Slider Not Slide Automatically

Question

I want to create javascript slider with next and previous button. Now next and previous button works fine.But alone with I need to slide automatically

Solution 1:

Your HTML has images by class name 'SlidePic' and not 'mySlides'. Also stTimeOut function needs to be called from within the function that you repeatedly want to execute. Hope this helps..

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    </head>


<body>
    <h2 class="slide">Manual Slideshow</h2>

    <div class="innerArea" style="max-width:800px;position:relative">
        <div class="SlidePic">
            <img class="" src="img_fjords.jpg" style="">
            <p>Hello</p>
        </div>
        <div class="SlidePic">
            <img src="image/oracle.png">
            <p>Hello1</p>
        </div>
        <div class="SlidePic">
            <img src="image/oracle.png">
            <p>Hello2</p>
        </div>
        <div class="SlidePic">
            <img src="img_forest.jpg">
            <p>Hello3</p>
        </div>

        <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(0)">></a>
        <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-2)"><</a>

    </div>


<script>
    var slideIndex = 1;
   showDivs(slideIndex);

    function plusDivs(n) {
        slideIndex += n;
        showDivs();
    }
 function showDivs() {

  var n = slideIndex;
  // alert(n)  ;
  if(n==='' || n==='0' || n==="undefined")
  n=1; 
  var i;
 var x = document.getElementsByClassName("SlidePic");
 if (n > x.length) {slideIndex = 1}
 if (n < 1) {slideIndex = x.length}
 for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
   slideIndex++;
  var t = setTimeout(function(){showDivs() }, 2000);
}


</script>

    </body>




</html>

Html5 Academy

Javascript Slider Not Slide Automatically

Solution 1:

Post a Comment for "Javascript Slider Not Slide Automatically"