I'm trying to make a slideshow but it isnt looping like it will be. It looping like 1-2-1-3-2-2 and sometimes it skips.
jsfiddle: https://jsfiddle.net/296vLj3z/
HTML:
<div class="slideshow-container">
<div class="mySlides fade">
<a class="btn" href="/mangalar/manga1"><img class="bannerimg" src="https://wallpapers.com/images/hd/jojo-bizarre-adventure-hero-banners-97au0jin9lw0i6lz.webp"/></a>
<div class="text btn" onclick="window.location.href='/mangalar/manga1'">Manga1</div>
</div>
<div class="mySlides fade">
<a class="btn" href="/mangalar/manga2"><img class="bannerimg" src="https://wallpapers.com/images/hd/jojo-bizarre-adventure-hero-banners-97au0jin9lw0i6lz.webp"/></a>
<div class="text btn" onclick="window.location.href='/mangalar/manga2'">Manga2</div>
</div>
<div class="mySlides fade">
<a class="btn" href="/mangalar/manga3"><img class="bannerimg" src="https://wallpapers.com/images/hd/jojo-bizarre-adventure-hero-banners-97au0jin9lw0i6lz.webp"/></a>
<div class="text btn" onclick="window.location.href='/mangalar/manga3'">Manga3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" id="nextSlide" onclick="plusSlides(1)">❯</a>
</div>
JavaScript:
let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides((slideIndex += n)); } function currentSlide(n) { showSlides((slideIndex = n)); } function showSlides(n) { let i; let slides = document.getElementsByClassName("mySlides"); let 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]; setInterval(function(){document.getElementById('nextSlide').click();}, 5000);}
The loop function is this:
setInterval(function(){document.getElementById('nextSlide').click();}, 5000);}