Javascript function 只工作一次

Question

I'm trying to create manual slideshow fo 5 slides. I created a function that works only once. Here is my JavaScript code:

 function n(){
    document.getElementById('sll').classList.add("slide-right");
}

 function p(){
    document.getElementById('sll').classList.remove("slide-right");
    document.getElementById('sll').classList.add("slide-left");
}

My HTML code is:

<div class="outer">
<i class="fas fa-arrow-right" onclick="n();"></i>
<div class="inner" id="sll">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
<i class="fas fa-arrow-left" onclick="p();"></i>

Answer 1

For an automatic slide changer, try calling the function inside setInterval() : setInterval(function() {p()},1000) . If you want it manual, you can try calling the function on button click using document.getElementById('button').onclick = () => { p() }