Idangerous swiper plug-in with 2 sliders / 1 nav

Question

I am actually using the swiper idangero'us plug-in (with the "progress" extension) and i would like to know something :

Is it possible to have the same navigation buttons for 2 differents sliders ?

for now i am trying to do something like that :

$(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();
              });

but it's not working !

here the classic code :

              $(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();
            }
        });  

Any help ?

Thank you !

Answer 1

You should seperated the toggle "arrow" into individual toggle.

$(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();
         });