How to make an unlimited number of sliders on a video page?

Question

JavaScript

Good afternoon! I just started learning Javascript /
The task is this: I need to develop a carousel slider for a video.
One slider is done. Code at https://github.com/Evgeniya080688/video-carusel
But the fact is that in the end the page should have not one or two sliders, but an unlimited number. t to respectively they will be added through CMS.
How to make many sliders function at once. For example, activate the desired one by clicking ...
In general, the result is needed as on the YouTube start page, where for each topic there is a scrolling tape.

I would be very grateful for the hint...

Answer 1

Process all found sliders.

<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();
});

Answer 2

You need to bind the slider logic to the specified element id.
For example:

<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>