slideshow looping randomly and sometimes skips very fast

Viewed 11

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);}
0 Answers
Related