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

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<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%;left:0" onclick="plusDivs(-1)">></a>
        <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">
            <</a>
    </div>
</body>

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

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }
 function showDivs(n) {
  if(n=='')
  n=1; 
  var i;
 var x = document.getElementsByClassName("mySlides");
  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";
}
 setTimeout(showDivs, 2000);
</script>

Answer 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>

javascript slider not slide automatically

Question

1 answers

solution1
1 ACCPTED 2016-06-29 08:42:35

javascript slider not slide automatically

Question

1 answers

solution1 1 ACCPTED 2016-06-29 08:42:35

solution1
1 ACCPTED 2016-06-29 08:42:35