@Evgeniya080688

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

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

Буду прeмного благодарна за подсказку...
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега JavaScript
Обрабатывай все найденные слайдеры.

<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();
});
Ответ написан
AlekseyArh
@AlekseyArh
Кибер существо
Нужно привязывать логику слайдера к указанному 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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 17:14
4000 руб./за проект
29 мар. 2024, в 17:04
5000 руб./за проект
29 мар. 2024, в 17:03
3000 руб./за проект