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

Question

[Cheizer]

Не могу понять, как этот слайдер запустить несколько раз на странице.

Обычный слайдер без thumbs делал через each:

$('.slider').each(function (i) {
            var swiper = new Swiper($('.slider')[i], {
                pagination: {
	el: $('.swiper-pagination')[i],
},
            });
        });

Но сейчас когда добавился вызов THUMS и я не пойму как сделать так, чтобы на страницу можно было добавлять несколько независимых слайдеров, без привязки по ID.

Вот вызов слайдера с THUMBS:

var galleryThumbs = new Swiper('.gallery-thumbs', {
      freeMode: true,
     touchRatio: 0,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
     slideThumbActiveClass: 'swiper-container-thumbs'
    });
    var galleryTop = new Swiper('.gallery-top', {
        autoplay: {
        delay: 1000,
      },
      thumbs: {
        swiper: galleryThumbs,
      },
    });

Если сделать через EACH, то слайдер работает, но THUMBS его не переключает.
Вот поднял пример, если удалить второй, все заработает: https://codepen.io/Cheizer/pen/bGbqdZb

Answer 1

[0xD34F]

Оборачиваете код в

document.querySelectorAll('.gallery').forEach(n => {

});

, заменяете '.gallery-thumbs' и '.gallery-top' на n.querySelector('.gallery-thumbs') и n.querySelector('.gallery-top') соответственно.

Comments

[Cheizer]

Благодарю!