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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 16.05.2023

Есть рабочий слайдер на 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);

javascript слайдер

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

С помощью 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>

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

Ответы