Моя функция для отображения изображений в карусели имеет дополнительное пустое изображение

Question

//get the object
let slideshowContainer = document.getElementById('slideshow-container');



//get the buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
//create an index
var slideIndex = 0;

function showSlides(n) {
    const slides = document.getElementsByClassName('product');
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }
    if (n < 0) {
        slideIndex = slides.length
    }
    if (n > slides.length) {
        slideIndex = 0
    }
    slides[slideIndex].style.display = 'block';
    slideIndex = n;
}

function incrementSlides(n) {
    showSlides(slideIndex += n)
}

//add event listeners
next.addEventListener('click', function () {
    incrementSlides(1);
})
prev.addEventListener('click', function () {
    incrementSlides(-1);
})

showSlides(slideIndex);

#section-one .categories {
  height: 80px;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#section-one .categories li {
  background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
  background: linear-gradient(to right, #0d0d0d, #202020);
  height: inherit;
  width: 12.5%;
  border-left: 1px solid black;
  -webkit-transition: all ease-in 0.3s;
  transition: all ease-in 0.3s;
}

#section-one .categories li:hover {
  background: green;
}

#section-one .categories li a {
  display: inline-block;
  font-size: 0.95rem;
  height: inherit;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#section-one .slideshow-container {
  height: 1000px;
  margin: auto;
  position: relative;
  background: grey;
}

#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
  top: 50%;
  background: blue;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  width: auto;
  position: absolute;
  padding: 16px;
}

#section-one .slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

   <!-- Section-one -->
    <section id="section-one">
      <ul class="categories">
        <li><a href="#">HEADPHONES</a></li>
        <li><a href="#">EARPHONES</a></li>
        <li><a href="#">BLUETOOTH</a></li>
        <li><a href="#">WATERPROOF</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">METALLIC</a></li>
        <li><a href="#">WOODEN/BAMBOO</a></li>
        <li><a href="#">EARMUFF</a></li>
      </ul>
      <div id="slideshow-container">
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://i.pinimg.com/originals/5a/e5/8f/5ae58f5036997cfd4636917403c3c951.jpg"
              alt="image1"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt="image2"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://cdn.pixabay.com/photo/2017/02/22/20/02/landscape-2090495_960_720.jpg"
              alt="image3"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <a href="javascript:void(0);" class="prev"></a>
        <a href="javascript:void(0);" class="next"></a>
      </div>
    </section>

Я пытаюсь создать страницу со слайдером изображений.Я посмотрел несколько видео на YouTube, собрал код и попытался заставить что-то работать, но натолкнулся на ошибку.Когда я перехожу на следующее или предыдущее изображение, я получаю пустую страницу и не знаю почему.Я создам фрагмент кода, чтобы показать вам.Я не хочу, чтобы проблема была решена, но и объяснение, пожалуйста!Ура !!!

Answer 1

Вам необходимо изменить 2 оператора "if", так как они не учитывают индекс на основе 0 в массиве:

if (n < 0) {
        slideIndex = slides.length - 1
    }
if (n > slides.length - 1) {
        slideIndex = 0
 }

Answer 2

Вот рабочий jsFiddle с несколькими исправлениями в вашем коде: https://jsfiddle.net/0mrpbv6c/

По сути, я добавил текст к вашим a ссылкам, чтобы иметь возможность нажимать на них

<a href="javascript:void(0);" class="prev">PREV</a>
<a href="javascript:void(0);" class="next">NEXT</a>

Я исправил ваши условия 2 if в showSlides, чтобы продолжить карусель, как и ожидалось.Здесь вы забыли - 1, так как ваши слайды начинаются с 0

if (n < 0) {
  slideIndex = slides.length - 1;
}
if (n > slides.length - 1) {
  slideIndex = 0;
}

Я удалил следующую инструкцию, так как вы не хотите обновлять slideIndex из n, потому что она уже обновляется при вызове showSlides in incrementSlides, а также перезаписывает значение, которое вы, возможно, получили из 2 if.

slideIndex = n;

Answer 3

Я пытался исправить ваш код.

function showSlides(n) {
  console.log(n)
    const slides = document.getElementsByClassName('product');
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }
      slideIndex = n; // edited
    if (n < 0) {
        slideIndex = slides.length
    }
    if (n >= slides.length) {  // edited
        slideIndex = 0
    }
    slides[slideIndex].style.display = 'block';
}