w3.css slideshow: So fügen Sie automatische Diashow-Funktionalität hinzu

Question

Ich möchte diese Diashow von w3.css-Bibliothek zur Diashow automatisch alle 4-5 Sekunden machen. Kann auch bei w3schools editor gefunden werden.

Weitere Dokumentation von w3.css Show gefunden werden kann here

Ich muss irgendwie diesen Code hinzufügen, um die Bilder zu machen Diashow automatisch, aber die Kugeln Hintergrund halten und machen die Pfeile arbeiten:

var slideIndex = 0; 
carousel(); 
function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); // Change image every 2 seconds 
} 

Dies ist die komplette Code:

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("demo"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " w3-white"; 
 
}

.mySlides {display:none} 
 
.w3-left, .w3-right, .w3-badge {cursor:pointer} 
 
.w3-badge {height:13px;width:13px;padding:0}

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

 
<div class="w3-container"> 
 
    <h2>Slideshow Indicators</h2> 
 
    <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p> 
 
</div> 
 

 
<div class="w3-content w3-display-container" style="max-width:800px"> 
 
    <img class="mySlides" src="https://cdn-s3.si.com/styles/marquee_large_2x/s3/images/trump-5.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://i.ytimg.com/vi/VpevTNRK-_M/maxresdefault.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://img00.deviantart.net/a73e/i/2015/261/4/3/the_magic_world_by_chibionpu-d4ol7wm.jpg" style="width:100%"> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> 
 
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> 
 
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    </div> 
 
</div>

Answer 1

setInterval(function(){ 
    slideIndex++; 
    currentDiv(slideIndex); 
}, 2000); 

zu Ihrem code example am Ende Fügen Sie diese