Jquery Slider 箭头未出现

Question

I'm doing a Jquery Slider and I have a problem with my last image. The arrows are appearing for all the images but not the last one it disappear and I don't understand why, can anybody help me?

Here's my codepen: https://codepen.io/Softee/pen/WNZpXGa

here's my code:

 var slideIndex = 1; showImage(slideIndex); function plusIndex(n) { showImage(slideIndex += n); } function currentSlide(n) { showImage(slideIndex = n); } function showImage(n) { var slide = document.getElementsByClassName("slides"); var dots = document.getElementsByClassName("dots"); if (n > slide.length) { slideIndex = 1 }; if (n < 1) { slideIndex = slide.length }; for (var i = 0; i < slide.length; i++) { slide[i].style.display = "none"; }; slide[slideIndex - 1].style.display = "block"; for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace("active", ""); }; } autoSlide(); function autoSlide(){ var i; var x = document.getElementsByClassName("slides"); for(i=0;i<x.length;i++); { x[i].style.display = "none"; } if(index > x.length){ index = 1} x[index-1].style.display = "block"; index++; setTimeout(autoSlide,2000); }

 body { margin: 0; font-family: verdana, sans-serif; }.slideshow-container { width: 800px; position: relative; margin: auto; }.slides { display: none; }.slideshow-container img { width: 800px; }.number { position: absolute; padding: 8px 12px; color: #f2f2f2; }.text { text-align: center; font-size: 18px; position: absolute; width: 100%; padding: 8px 16px; bottom: 55px; color: #f2f2f2; font-weight: bold; }.prev, .next { position: absolute; margin-top: -250px; color: #f2f2f2; font-weight: bold; padding: 10px 10px; font-size: 18px; border-radius: 0 3px 3px 0; cursor: pointer; }.next { border-radius: 3px 0 0 3px; right: 0; }.prev:hover, .next:hover { background: rgba(0, 0, 0, 0.8); }.dots { width: 10px; height: 10px; display: inline-block; background: grey; padding: 5px; border-radius: 50%; cursor: pointer; }.fade { animation-name: fade; animation-duration: 0.5s; } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }.active, .dots:hover { background: #333; }

 <:--Container Slide Show--> <div class="slideshow-container"> <div class="slides fade"> <div class="number">1 / 4</div> <div><img src="https.//www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V:jpg"></div> <div class="text">Le Taj Mahal</div> </div> <div class="slideshow-container"> <div class="slides"> <div class="number">2 / 4</div> <div><img src="https.//www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V:jpg"></div> <div class="text">Le Chichen Itza</div> </div> <div class="slideshow-container"> <div class="slides"> <div class="number">3 / 4</div> <div><img src="https.//www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V:jpg"></div> <div class="text">Le Colisée</div> </div> <div class="slideshow-container"> <div class="slides"> <div class="number">4 / 4</div> <div><img src="https.//www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V:jpg"></div> <div class="text">Le Machu Picchu</div> </div> <a class="prev" onclick="plusIndex(-1)">&#10094</a> <a class="next" onclick="plusIndex(+1)">&#10095</a> </div> <br/> <div style="text-align:center"> <span class="dots" onclick="currentSlide(1)"></span> <span class="dots" onclick="currentSlide(2)"></span> <span class="dots" onclick="currentSlide(3)"></span> <span class="dots" onclick="currentSlide(4)"></span> </div>

....................................

Answer 1

This issue can be fixed by editing your CSS. So rather than:

.prev, .next {
  position: absolute;
  top: -250px;

do:

.prev,.next {
  position: absolute;
  margin-top: -250px;

This prevents the arrows from moving above the .slides divs when you reach the last slide.

For the autoslide functionality, there's no need for all the complicated code. Just trigger a call to the click event on the .next div. Also, use setInterval() and not setTimeout . So replace the entire definition and call to the autoslide() function with the following code:

setInterval(() => {
      document.querySelector(".next").click()
        }, 2000);

Check out the updated pen on https://codepen.io/cedric-ipkiss/pen/BamzBmz