Как сделать неограниченное количество слайдеров на странице с видео?

Question

[Evgeniya080688]

Добрый день! Я только начала изучать Javascript/
Задача такая: нужно разработать слайдер карусель для видео.
Один слайдер сделан. Код на https://github.com/Evgeniya080688/video-carusel
Но дело в том, что в итоге на странице должен быть не один и не два слайдера, а неограниченно много. т к соответственно добавляться они будут через CMS.
Как сделать, чтобы функционировалось сразу много слайдеров. Например, активировать нужный по клику...
Вобщем результат нужен как на стартовой странице ютуба, где по каждой теме лента прокрутки.

Буду прeмного благодарна за подсказку...

Answer 1

[profesor08]

Обрабатывай все найденные слайдеры.

<div id="slider1" data-slider></div>
<div id="slider2" data-slider></div>
<div id="slider3" data-slider></div>

let sliders = document.querySelector("[data-slider]");

for (let i = 0; i < sliders.length; i++) {
  let slider = Slider.load(sliders[i]);
  slider.start();
}

jQuery

$("[data-slider]").each(function() {
  let slider = Slider.load(this);
  slider.start();
});

Comments

[Evgeniya080688]

у меня получилось. Можно и так, но я просто при клике заношу в переменную с массивом конкретный слайдер этого блока при нажатии

var slidecur = this.parentNode.children[0];
slidemassiv= $(slidecur).children();

Но все равно спасибо!!

Answer 2

[Алексей Арх]

Нужно привязывать логику слайдера к указанному id элемента.
Для примера:

<div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3"></div>

<script>
    var Slider = {

        // Элемент
        sliderElement: null,

        // Привязывается к элементы и возвращает сам себя
        load: function (element) {
            this.sliderElement = element;
            return this;
        },

        // Пример старта слайдера
        start: function (text) {
            this.sliderElement.innerHTML = text;
        }

    };

    // 1
    let Slider1 = Slider.load(document.getElementById("slider1"));
    Slider1.start('раз');
    // 2
    let Slider2 = Slider.load(document.getElementById("slider2"));
    Slider2.start('два');
    // 3
    let Slider3 = Slider.load(document.getElementById("slider3"));
    Slider3.start('три');
</script>

Comments

[Evgeniya080688]

не, получится так. Слайдер формируется из нового плейлиста. он будет добавляться из админки CMS. т е при добавлении нового плейлиста придется переписывать код. Не вариант.
тут скорее подойдет реакция на событие mouseover ... наверное