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 >
  <div >
    <div >1 / 4</div>
    <div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
    <div >Le Taj Mahal</div>
  </div>

  <div >
    <div >
      <div >2 / 4</div>
      <div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
      <div >Le Chichen Itza</div>
    </div>

    <div >
      <div >
        <div >3 / 4</div>
        <div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
        <div >Le Colisée</div>
      </div>

      <div >
        <div >
          <div >4 / 4</div>
          <div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
          <div >Le Machu Picchu</div>
        </div>

        <a  onclick="plusIndex(-1)">&#10094</a>
        <a  onclick="plusIndex( 1)">&#10095</a>

      </div>
      <br/>

      <div style="text-align:center">
        <span  onclick="currentSlide(1)"></span>
        <span  onclick="currentSlide(2)"></span>
        <span  onclick="currentSlide(3)"></span>
        <span  onclick="currentSlide(4)"></span>
      </div>

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

CodePudding user response：

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