如何修复卡在第一张幻灯片上的这个简单的 javascript 幻灯片？

Question

I'm having trouble making this simple slideshow work. I think it has something to do with the javascript, but I'm not that far on my training to understand it yet. Here is the code I placed inside the HTML's body:

<script>
    var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;
    var slideInterval = setInterval(nextSlide,2000);

    function nextSlide(){
        slides[currentSlide].className = 'slide';
        currentSlide = (currentSlide+1)%slides.length;
        slides[currentSlide].className = 'slide showing';
}</script>

<div id="deps">
    <ul id="slides">
        <li class="slide showing">Slide 1</li>
        <li class="slide">Slide 2</li>
        <li class="slide">Slide 3</li>
        <li class="slide">Slide 4</li>
        <li class="slide">Slide 5</li>
    </ul>
</div>

I can't figure out the problem since I don't even know how to code in js yet. I simply copied the code from a tutorial online, but, unlike there, my slides are stuck on the first one.

Answer 1

I think it might be your setInterval instead of calling it like this :

setInterval(functionname,2000);

try it like this :

setInterval(()=>{functionname()},2000);

this gives you something like this :

jsfiddle

also be sure to wrap all your code in a domcontent event listener :

document.addEventListener('DOMContentLoaded',()=>{ /*your javascript code*/ });  

This makes sure your html elements are available when you use them in javascript