18
Апр
2021

После переключения слайдов ошибка: Uncaught TypeError: Cannot read property ‘classList’ of undefined at HTMLDivElement

После переключения трёх слайдов появляется ошибка

Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLDivElement

HTML

 <div class="slider">
            <div class="slider_img">
                 <div class="slide slider_show">
                     <img src="img/slider_img_1.png" alt="shrimps">
                 </div>
                 <div  class="slide slide_hide">
                     <img src="img/slider_img_2.png" alt="dorada_fish">
                 </div>
                 <div class="slide slide_hide">
                     <img src="img/slider_img_3.png" alt="vodka">
                 </div>
            </div>
        </div>
        <div class="slider_nav">
            <div class="slider_nav_prev">
                <img src="icons/slider_prev.png" alt="previous">
            </div>
            <div class="slider_nav_next">
                <img src="icons/slider_next.png" alt="next">
            </div>
        </div>

JS

  const nextbtn = document.querySelector('.slider_nav_next'),
  prevbtn = document.querySelector('.slider_nav_prev'),
  sliderNav = document.querySelector('.slider_nav'),
  slide = document.querySelectorAll('.slide'),
  dot = [];
  let slideIndex = 1;


nextbtn.addEventListener('click', () => {
if(slideIndex == slide.length) {
    slideIndex = 0;
} else {
    slideIndex++;
}
slide.forEach(item => {
    item.classList.add('slide_hide');
});

slide[slideIndex].classList.add('slide_show'); 
slide[slideIndex].classList.remove('slide_hide');

dot.forEach(dot => {
    dot.style.opacity = 0.5;
});
dot[slideIndex].style.opacity = 1;
});

Ошибка появляется на этих строках

slide[slideIndex].classList.add('slide_show'); 
slide[slideIndex].classList.remove('slide_hide');

Источник: https://ru.stackoverflow.com/questions/1271848/%D0%9F%D0%BE%D1%81%D0%BB%D0%B5-%D0%BF%D0%B5%D1%80%D0%B5%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%BE%D0%B2-%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B0-uncaught-typeerror-cannot-read-property-cla

Тебе может это понравится...

Добавить комментарий