Arrêt du curseur Css-Javascript W3 après deux boucles

Question

J'essaye de faire un curseur ayant 5 images avec l'aide de W3 CSS et du javascript. Je voudrais que le curseur s'arrête après 2 boucles sur la première diapositive et que la première diapositive reste statique. Après cela, l'utilisateur devrait être en mesure d'utiliser les boutons manuels pour previous slide et next slide. Je suis nouveau à javascript, incapable de faire cela. S'il vous plaît aider.

Après mon code (jsFiddle à 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

Votre carrousel se répète toutes les 9 secondes (9000 millisecondes) avec le setTimeout. Vous pouvez ajouter un compteur:

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 \t 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 \t 
 
      w3-padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide5">Slide-5 (read \t 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>

Lorsque le compteur est atteint, la fonction de carrousel ne sera pas mis en place à exécuter plus.