Automatische Diashow mit vorherigen und nächsten Indikatoren

Question

Ich versuche, eine Nebenschau zu erstellen, die automatisch von einem Bild zum nächsten wechselt, aber auch in der Lage sein, den Benutzer die Folie manuell mit vorherigen und nächsten Indikatoren zu ändern.

ich das Tutorial von diesem Link bin mit: https://www.w3schools.com/howto/howto_js_slideshow.asp

Aber sie verschmelzen nicht die beiden zusammen und ich kann keinen Weg finden, um es an die Arbeit.

Dies ist der Code, den ich habe:

var slideIndex = 1; 
 
    showSlides(slideIndex); 
 
    function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
    } 
 
    function currentSlide(n) { 
 
    showSlides(slideIndex = n); 
 
    } 
 
    function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 
    if (n > slides.length) {slideIndex = 1} 
 
    if (n < 1) {slideIndex = slides.length} 
 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
     dots[i].className = dots[i].className.replace(" active", ""); 
 
    } 
 
    if (slideIndex> slides.length) {slideIndex = 1} 
 
    slides[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " active"; 
 
    }

/* Slideshow container */ 
 
.slideshow-container { 
 
    display:     flex; 
 
    display:     -webkit-flex; /* Safari 8 */ 
 
    flex-wrap:    wrap; 
 
    -webkit-flex-wrap:  wrap;   /* Safari 8 */ 
 
    justify-content:   center; 
 
    -webkit-justify-content: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 4%; 
 
    width: auto; 
 
    position: relative; 
 
    cursor: pointer; 
 
    box-sizing: border-box; 
 
} 
 

 
.slideshow-container img { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    border-radius: 3px; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    .slideshow-container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 100%; 
 
    } 
 
} 
 

 
.mySlides { 
 
    display: none; 
 
} 
 

 
/* Next & previous buttons */ 
 
.prev, .next { 
 
cursor: pointer; 
 
position: absolute; 
 
top: 45%; 
 
width: auto; 
 
margin-top: -22px; 
 
padding: 16px; 
 
color: white; 
 
font-weight: bold; 
 
font-size: 18px; 
 
transition: 0.6s ease; 
 
border-radius: 0 3px 3px 0; 
 
} 
 

 
/* Position the "next button" to the right */ 
 
.next { 
 
right: 0; 
 
border-radius: 3px 0 0 3px; 
 
} 
 

 
.prev { 
 
left: 0; 
 
border-radius: 3px 0 0 3px; 
 
} 
 

 
/* On hover, add a black background color with a little bit see-through */ 
 
.prev:hover, .next:hover { 
 
background-color: rgba(0,0,0,0.8); 
 
} 
 

 
/* Caption text */ 
 
.text { 
 
color: #f2f2f2; 
 
font-size: 15px; 
 
padding: 8px 12px; 
 
position: absolute; 
 
bottom: 50px; 
 
width: 100%; 
 
text-align: center; 
 
} 
 

 
/* The dots/bullets/indicators */ 
 
.dot { 
 
cursor: pointer; 
 
height: 13px; 
 
width: 13px; 
 
bottom: 50px; 
 
margin: 0 2px; 
 
position: relative; 
 
background-color: #bbb; 
 
border-radius: 50%; 
 
display: inline-block; 
 
transition: background-color 0.6s ease; 
 
} 
 

 
.active, .dot:hover { 
 
background-color: #717171; 
 
} 
 

 
/* Fading animation */ 
 
.fade { 
 
-webkit-animation-name: fade; 
 
-webkit-animation-duration: 4s; 
 
animation-name: fade; 
 
animation-duration: 4s; 
 
} 
 

 
@-webkit-keyframes fade { 
 
from {opacity: .4} 
 
to {opacity: 1} 
 
} 
 

 
@keyframes fade { 
 
from {opacity: .4} 
 
to {opacity: 1} 
 
}

<div class="slideshow-container"> 
 
    <div class="mySlides fade"><a href="#"><img src="https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg" style="width:100%"></a></div> 
 
    <div class="mySlides fade"><a href="#"><img src="http://www.firstnaturetours.com/images/content/oregon-coast-2000x800.jpg" style="width:100%"></a></div> 
 
    <div class="mySlides fade"><a href="#"><img src="http://hdwallpapersbuzz.com/wp-content/uploads/2016/11/Sunrise-Beach-Koh-Lipe-Thailand-HD-Photo-17.jpg" style="width:100%"></a></div> 
 
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
    <a class="next" onclick="plusSlides(1)">&#10095;</a> 
 
    <br> 
 
    <div style="text-align:center"> 
 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
    </div> 
 
</div>

Answer 1

Ich habe dies:

// Start of auto Slideshow 
 

 

 
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, 2000); // Change image every 2 seconds 
 
} 
 

 

 
// End of auto Slideshow 
 

 

 

 

 

 
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-red ", " "); 
 
    } 
 
    x[slideIndex-1].style.display = "block "; 
 
    dots[slideIndex-1].className += " w3-red "; 
 
} 
 

 

 

 

 
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-red ", " "); 
 
    } 
 
    x[slideIndex-1].style.display = "block "; 
 
    dots[slideIndex-1].className += " w3-red "; 
 
}

body { 
 
background-color: black; 
 
color: red; 
 
} 
 

 

 

 
.mySlides {display:none} 
 
.w3-left, .w3-right, .w3-badge {cursor:pointer} 
 
.w3-badge {height:13px;width:13px;padding:0} 
 
.w3-content w3-display-container { border: 2px solid red; }

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

 
<img class= "mySlides " src= "https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg" style= "width:100% "> 
 
<img class= "mySlides " src= "http://www.firstnaturetours.com/images/content/oregon-coast-2000x800.jpg" style= "width:100% "> 
 
<img class= "mySlides " src= "http://hdwallpapersbuzz.com/wp-content/uploads/2016/11/Sunrise-Beach-Koh-Lipe-Thailand-HD-Photo-17.jpg" style= "width:100% "> 
 

 

 
    <div class= "w3-center "> 
 
     <div class= "w3-section "> 
 
     <div class= "w3-left w3-padding-left w3-hover-text-khaki " onclick= "plusDivs(-1) ">&#10094;</div> 
 
     <div class= "w3-right w3-padding-right w3-hover-text-khaki " onclick= "plusDivs(1) ">&#10095;</div> 
 
     </div> 
 
     <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(1) "></span> 
 
     <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(2) "></span> 
 
     <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(3) "></span> 
 

 
     </div> 
 

 
    </div>

Allerdings gibt ba scheint einige Probleme . Ich kann nicht herausfinden, warum die runden Knöpfe transparent sind.

Answer 2

Ja, schade, dass sie die Proben nicht kompatibel gemacht haben. Um es in der Nähe des ursprünglichen Codes zu halten, verwenden Sie einfach ein Intervall, um plusSlides(1):

var slideIndex = 1; 
    showSlides(slideIndex); 

    function plusSlides(n) { 
    showSlides(slideIndex += n); 
    } 
    function currentSlide(n) { 
    showSlides(slideIndex = n); 
    } 
    function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    if (slideIndex> slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
} 
setInterval(plusSlides, 2000, 1); // call plusSlider, with 1 as parameter