CODEWITHSUNDEEP
javascripthtmlcss
user3386779
user3386779

Reputation: 7175

javascript slider not slide automatically

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>

Upvotes: 0

Views: 343

Answers (1)

T.Shah
T.Shah

Reputation: 2768

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>

Upvotes: 1

Related Questions