How to create multiple Swiper sliders with one pagination?

Question

I want to make 2 sliders with one pagination. I use Swiper 2.7.6.

Both sliders should have different effects. I haven't found an example on official page. I want it to look like this. Here's a code:

  if ($('.photo-slider').length) {
    $('.photo-slider').each(function(i){
        var $this = $(this);
        //slider ID
        var id = 'photo_slider_'+i;
        // $this.find('.slider').attr('id', id);
        $this.find('.slider').attr('id', id);
        // pagination
        var paginationClass = 'pagination-photo'+i;
        $('.photo-slider').append('<div class="slider-pagination for-photo '+paginationClass+'"></div>');

        var $slider = new Swiper('#'+id, {
            slidesPerView: 1,
            loop: true,
            grabCursor: true,
            calculateHeight: true,
            pagination: '.'+paginationClass,
            paginationClickable: true
        });

        $this.find('.slider-arrow').on('click', function(){
            if ($(this).hasClass('prev')) {
                $slider.swipePrev();

            } else {
                $slider.swipeNext();
            }

            return false;
        });

        i++;
    });        
}

Answer 1

Are you trying to link 2 separate instances of Swiper slideshows with only 1 set of pagination / nav?

Why not just set the pagination & nav buttons on one instance? If you have them linked movement on either will affect the other.