两次循环后停止 W3 Css-Javascript 滑块

Question

I am trying to make a slider having 5 images with help of W3 CSS and some javascript. I would like the slider to stop after 2 loops at the first slide and the first slide should remain static. After that, the user should be able to use the manual buttons for previous slide and next slide . I am new to javascript, unable to do that. Please help.

Following is my code (jsfiddle at https://jsfiddle.net/dofhergw/ )-

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-content w3-display-container " style="max-width:500px">

<div class="w3-display-container w3-animate-fading mySlides">
  <a href="" target="_blank" title="slide1">
  <img class="" src="img01.jpg" style="width:100%">
  </a>
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-
  16 w3-black">
    <a href="" 
  target="_blank" title="slide1">Slide-1 (read more)</a>
  </div>
</div>
.....
.....

<div class="w3-display-container w3-animate-fading mySlides">
        <a href="" target="_blank" title="slide5">
        <img class="" src="img05.jpg" style="width:100%">
        </a>
          <div class="w3-display-middle w3-large w3-container   
             w3-padding-16 w3-black">
            <a href="" target="_blank" title="slide5">Slide-5 (read more)
      </a>
          </div>
</div>

<button class="w3-button w3-display-left w3-black" 
onclick="plusDivs(-1)">&#10094;</button>
        <button class="w3-button w3-display-right w3-black" 
onclick="plusDivs(1)">&#10095;</button>

</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 9000);  

}
</script>

Answer 1

Your carousel repeats itself every 9 seconds (9000 milliseconds) with the setTimeout . You can add a counter:

 var myIndex = 0; var counter = 0; var maxLength = 0; var loops = 2; var interval = 1000; //for testing purposes function carousel() { var x = document.querySelectorAll(".mySlides"); //using modern querySelectorAll maxLength = x.length * loops; //times 2 for two loops //optimalization here - borrowing Array forEach to loop over node list Array.prototype.forEach.call(x, function(element) { element.style.display = "none"; }); counter++; //adding counter if (myIndex >= x.length) { myIndex = 0 }; //reset this to zero indexing x[myIndex].style.display = "block"; //show the slide if (counter <= maxLength) //ie counter <= 10, execute { myIndex++; //add index with every pass setTimeout(carousel, interval); } else { Array.prototype.forEach.call(x, function(element) { element.classList.remove("w3-animate-fading"); //remove the fading }); } } carousel();

 .w3-content.w3-display-container { margin-top: 100px; } button.w3-button.w3-display-left.w3-black { position: relative; left: -50px; } button.w3-button.w3-display-right.w3-black { position: relative; right: -118px; }

 <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="w3-content w3-display-container " style="max-width:150px"> <div class="w3-display-container w3-animate-fading mySlides"> <a href="" target="_blank" title="slide1"> <img class="" src="img01.jpg" style="width:100%"> </a> <div class="w3-display-bottomleft w3-large w3-container w3- padding-16 w3-black"> <a href="" target="_blank" title="slide1">Slide-1 (read more)</a> </div> </div> <div class="w3-display-container w3-animate-fading mySlides"> <a href="" target="_blank" title="slide2"> <img class="" src="img02.jpg" style="width:100%"> </a> <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black"> <a href="" target="_blank" title="slide2">Slide-2 (more)</a> </div> </div> <div class="w3-display-container w3-animate-fading mySlides"> <a href="" target="_blank" title="slide3"> <img class="" src="img03.jpg" style="width:100%"> </a> <div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black"> <a href="" target="_blank" title="slide3">Slide-3 (read more)</a> </div> </div> <div class="w3-display-container w3-animate-fading mySlides"> <a href="" target="_blank" title="slide4"> <img class="" src="img04.jpg" style="width:100%"> </a> <div class="w3-display-topright w3-large w3-container w3-padding-16 w3-black"> <a href="" target="_blank" title="slide4">Slide-4 (read more)</a> </div> </div> <div class="w3-display-container w3-animate-fading mySlides"> <a href="" target="_blank" title="slide5"> <img class="" src="img05.jpg" style="width:100%"> </a> <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black"> <a href="" target="_blank" title="slide5">Slide-5 (read more)</a> </div> </div> <button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button> <button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button> </div>

When the counter is reached, the carousel function will not be set up to be executed anymore.