2ループ後にW3 Css-Javascriptスライダーを停止する

Question

W3 CSSといくつかのJavaScriptの助けを借りて5つの画像を持つスライダーを作ろうとしています。最初のスライドで2回ループした後にスライダを停止したい場合、最初のスライドは静的にしておきます。その後、ユーザーはprevious slideとnext slideのマニュアルボタンを使用できるはずです。私はjavascriptに新しいです、それを行うことができません。助けてください。続き

は私のコード（https://jsfiddle.net/dofhergw/でjsfiddle）である -

<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

あなたのカルーセルはsetTimeoutで自身ごとに9秒（9000ミリ秒）を繰り返します。カウンタが到達すると、カルーセル機能はもう実行するように設定されることはありません

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>

：あなたはカウンターを追加することができます。