Scroll Slideshow

Ciao a tutti, ho trovato questo codice per creare una slideshow:

HTML:

Codice HTML:

---

<div class="slideshow-container">

<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="/image/slideshow1.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="/image/slideshow2.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="/image/slideshow3.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="/image/slideshow4.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="/image/slideshow5.jpg" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>

---

CSS:

Codice:

---

.slideshow-container {
max-width: 628%;
max-height: 297px;
position: relative;
margin: auto;
}

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #fe7501;
font-weight: bold;
font-size: 25px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

.next {right: 0; border-radius: 3px 0 0 3px;}

.prev:hover, .next:hover {background-color: #000000;}

.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
font-weight: bold;
}

.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

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

---

JS:

Codice:

---

<script>
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", "");
}
slides[slideIndex-1].style.display = "block"; 
dots[slideIndex-1].className += " active";
}
</script>

---

Ora volevo sapere come aggiungere un effetto scroll, cioè, che l'immagine vada avanti da sola anche quando non si cliccano i pulsanti. Non me ne intendo di JS e chiedo a voi.

Grazie.

Vedo un:

Codice:

---

onclick="plusSlides(1)

---

Quindi per far avanzare di uno devi richiamare quella funzione.
Per richiamare una funzione ogni tempo predefinito scelto da te, dovresti usare setInterval.

Ciao!

Ho provato ma non ci sono riuscito, non sono capace ad utilizzare JS.

Edit: ho aggiunto questo codice ed ha funzionato, grazie.

Codice:

---

setInterval('plusSlides(1);',5000);

---

ciao, l'ho usato da poco per questo timer: https://calcmore.altervista.org/timer.php

per avviare dovresti fare:

Codice:

---

myInterval = setInterval(plusSilides(1),5000);

---

per fermare invece, dovresti fare:

Codice:

---

clearInterval(myInterval);

---

Ho già risolto ma grazie mille :)