Слайдер на Javascript требует доработки

Question

Есть рабочий слайдер на javascript, но стоит задача избиваться от локальной переменной counter. Вот описание решения: С помощью findIndex найдите позицию активного слайда из массива слайдов. Это действие позволит формировать позицию активного слайда без использования глобальной переменной. Не совсем понятно как это сделать.

let sliders = document.querySelectorAll('.slider__item');
let arrowPrev = document.querySelector('.slider__arrow_prev');
let arrowNext = document.querySelector('.slider__arrow_next');
let counter = 0;

let sliderShow = (index) => {
    for (let i = 0; i < sliders.length; i++) {
        sliders[i].classList.remove('slider__item_active');
    }

    sliders[index].classList.add('slider__item_active');
}


let prevSlide = () => {
    counter++;

    if (counter >= sliders.length) {
        counter = 0;
    }

    sliderShow(counter);
}

let nextSlide = () => {
    counter--;

    if (counter < 0) {
        counter = sliders.length - 1;
    }

    sliderShow(counter);
}

arrowNext.addEventListener('click', nextSlide);
arrowPrev.addEventListener('click', prevSlide);

Answer 1

С помощью findIndex найдите позицию активного слайда из массива слайдов. Это действие позволит формировать позицию активного слайда без использования глобальной переменной. Не совсем понятно как это сделать.

Такое можно реализовать например вот так...

let sliders = document.querySelectorAll('.slider__item')
const i = [...sliders].findIndex(o => o.classList.contains('slider__item_active'))
console.log('Индекс активного элемента -', i)

.slider__item_active {
  color: red;
}

<ul>
  <li class='slider__item'>Элемент 1</li>
  <li class='slider__item'>Элемент 2</li>
  <li class='slider__item slider__item_active'>Элемент 3</li>
  <li class='slider__item'>Элемент 4</li>
</ul>

БЛОГ НА HUSL

Слайдер на Javascript требует доработки

Ответы (1 шт):