Как сделать несколько одинаковых Swiper Slider слайдеров на странице?

z_u_l, Да так тоже пробовал, у меня ничего не выходит. Так все работает если убрать объект thumbs, но чтобы связать слайдеры он нужен, поэтому когда добавляю его, то все ломается. Пришлось подключать вручную, по отдельности.

Как сделать несколько одинаковых Swiper Slider слайдеров на странице?

А как сейчас будет выглядеть код? Сделал по аналогии - не работает вообще((

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

 const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
      slidesPerView: 3,
    });

    const slider = new Swiper(n.querySelector('.product-top'), {
      navigation: {
        nextEl: n.querySelector('.swiper-button-next'),
        prevEl: n.querySelector('.swiper-button-prev'),
      },
      spaceBetween: 10,
      thumbs: {
        swiper: n.querySelector('.product-thumbs'),
      }
    });

   

    slider.controller.control = thumbs;
    thumbs.controller.control = slider; - эти строки не нужны?
  });

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

spasatelev, Через console.log выдало 5

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

Есть один большой слайдер из 3 слайдов, внутри каждого слайда есть галерея(оно из двух слайдеров - '.feedback__main-top' и '.main-thumbs', которое по коду связывается через thumbs), по этому фрагменту кода, что выше. Всего их 3 (.main-thumbs) получается.

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

Пишет такую ошибку: Cannot read property 'addClass' of undefined | thumbs.js:32
На этой строке подчеркивает
swiper.thumbs.swiper.$el.addClass(swiper.params.thumbs.thumbsContainerClass

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

По идеи тоже самое что и раскомментировать, это не помогает. Та же самая ошибка

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

Спасибо, это уже ближе к тому что я так искал) Поковыряюсь, может разберусь)

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

Ankhena, Вы проверяли это лично? Пытался так сделать, ошибка вылезает и слайдеры ломаются. Есть большой слайдер, внутри галерея (как бы тоже два слайдера связанных между собой). Всего больших слайдов 3, внутри по 1 галереи. Когда галерее одна - все работает, если же несколько - всё ломается и ошибка.

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

RAX7, Можно подробней, что за комбинаторы, как их применить в данном случае, чтобы работало?

Какой есть плагин или способ кастомизации select?

Так этому плагину нужен jQuery?

Как переопределить nouislider классы?

Pashok Doom, Понятно теперь, а черную обводку какой класс задает?

Как переопределить nouislider классы?

Pashok Doom, Это столько всего прописывать ради кастомизации одного слайдера на js?) Спасибо за помощь. Осталось поковыряться

Как переопределить nouislider классы?

Pashok Doom, Т.е я прописываю в cssClasses, например handle: "handle", а потом уже в css шаманить? Так я хочу свой класс задать, чтобы его конкретно отстилить. А в классе прописать уже свой отстиленный ползунок

Как переопределить nouislider классы?

А вот как стилизовать touchArea, или handle - сами ползунки, когда добавляю класс у меня слайдер вообще пропадает.

noUiSlider.create(asideRange, {
        connect: true,
        
        start: [500, 4000],
        range: {
            'min': [0],
            '10%': [500, 500],
            '50%': [4000, 1000],
            'max': [10000]
        },
        cssPrefix: 'noUi-', // defaults to 'noUi-',
        // cssClasses: {
        //     handle: 'custom-handle',
        // }
    });

Как сделать стрелки видимыми за пределами контейнера?

У меня даже сработало когда я просто вынес, а в свойстве оставил стрелки, без методов))
Реализовал через метод из документации - все работает четко!
Да пришлось все обернуть, зато полностью рабочий слайдер.
Спасибо за решение)