Как исправить код, чтобы заработали два и более слайдеров?

Question

[Иван Симонов]

Создал простой слайдер на javascript - Fiddle.
Но если добавить в html еще один такой слайдер, 2 слайдер не работает - Fiddle.

Как вариант, можно задать новый классы, и прописать новый код для javascript, но это скорее всего неправильное решение.
Подскажите, как правильно поступать в данном случае?

Answer 1

[0xD34F]

Добавьте параметр - селектор корневого элемента слайдера (или сам элемент). Поиск слайдов и кнопок выполняйте не по всему документу, а внутри корневого элемента.

function simpleSlider(element) {
  const root = typeof element === 'string'
    ? document.querySelector(element)
    : element;

  const items = root.querySelectorAll('.slider__item');
  const prev = root.querySelector('.slider__btn-prev');
  const next = root.querySelector('.slider__btn-next');

  let index = 0;

  function slideTo(newIndex) {
    items[index].classList.remove('slider__item--active');
    index = (newIndex + items.length) % items.length;
    items[index].classList.add('slider__item--active');
  }

  prev.addEventListener('click', () => slideTo(index - 1));
  next.addEventListener('click', () => slideTo(index + 1));
}

simpleSlider('#slider1');
simpleSlider(document.querySelector('#slider2'));

Comments

[Иван Симонов]

Спасибо. console.log(simpleSlider('#slider1')) - выводится undefined. Понимаю, что без return функция undefined, а как в данном случае вывести значение 1 и 2 функций в консоль?

[0xD34F]

Иван Симонов, это какая-то шизофрения. Понимаете, что надо значение возвращать, и тут же спрашиваете, что вам делать. НУ ТАК ВЕРНИТЕ ИЗ ФУНКЦИИ ЧТО-НИБУДЬ.