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.
А это не хорошо.
Как можно поступить в этом случае?
  • Вопрос задан
  • 4952 просмотра
Решения вопроса 1
0xD34F
@0xD34F
Попробуйте заменить

el: '.slidernav'

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

el: this.querySelector('.slidernav')

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

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

Войти через центр авторизации
Похожие вопросы