swiper - 带有 2 个滑块 / 1 个导航的 Idangerous swiper 插件

Question

我实际上正在使用 swiper idangero'us 插件（带有“progress”扩展名），我想知道一些事情：

是否可以为 2 个不同的滑块使用相同的导航按钮？

现在我正在尝试做这样的事情：

$(function(){
              var mySwiper = $('.swiper-container').swiper();
              var mySwiper2 = $('.swiper-container-genders').swiper();

              $('.swiper-arrow-right').click(function(){
                mySwiper.swipeNext();
                mySwiper2.swipeNext();                
              });
              $('.swiper-arrow-left').click(function(){
                mySwiper.swipePrev();
                mySwiper2.swipePrev();
              });

但它不工作！

这里是经典代码：

              $(document).on('click', '.swiper-arrows', function(e){
            e.preventDefault();
            var index = $(this).attr('data-id');
            if ($(this).is('.swiper-arrow-right')) {
              $('.swiper-container[data-id="'+index+'"]').data('swiper').swipeNext();
            } else {
              $('.swiper-container[data-id="'+index+'"]').data('swiper').swipePrev();
            }
        });  

有什么帮助吗？

谢谢 ！

Answer 1

您应该将切换“箭头”分成单独的切换。

$(function(){ var mySwiper = $('.swiper-container').swiper(); var mySwiper2 = $('.swiper-container-genders').swiper();

         $('.swiper-arrow-right').click(function(){
           mySwiper.swipeNext();
           mySwiper2.swipeNext();                
         });
         $('.swiper-arrow-left').click(function(){
           mySwiper.swipePrev();
           mySwiper2.swipePrev();
         });
         $('.swiper-arrow-right2').click(function(){
           mySwiper2.swipeNext();                
         });
         $('.swiper-arrow-left2').click(function(){
           mySwiper2.swipePrev();
         });