Cheizer
@Cheizer

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

Использую Swiper слайдер, и возникла необходимость сделать не ограниченное количество слайдеров на одной странице. Все работает но вот не задача инициализация делается вот так:

$('.sw-product').each(function(){
        var swiper = new Swiper(this, {
        lazyLoading: true, 
            
        pagination: {
        el: '.slidernav',
        clickable: true,
        bulletClass: 'roundbtn', 
        bulletActiveClass: 'active',
        renderBullet: function (index, className) {
          return '<button class=" ' + className + '"></button>';
        },
      },
            
    });
});


Естественно, когда я нажимаю на любую кнопку пагинации перелистывания слайда например swiper-pagination-bullets, у меня перелистываются все слайдеры сразу. Проблема в том, что если выводить неограниченное количество слайдеров, придется в каждом слайдере писать свой класс, и несколько раз дублировать js.
А это не хорошо.
Как можно поступить в этом случае?
  • Вопрос задан
  • 4985 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Попробуйте заменить

el: '.slidernav'

на что-то вроде

el: this.querySelector('.slidernav')

Ну, то есть - найдите элемент пагинации текущего слайдера вместо того, чтобы указывать сразу все для всех.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы