How to make one pagination for 2 sliders in Swiper slider?

Question

css

I need such a slider
. I use Swiper 2.7.6. I did not find any examples in official docks, in Google too. Does anyone have examples?
Here is my code

if ($('.photo-slider').length) {
        $('.photo-slider').each(function(i){
            //формируем HTML для инициализации слайдера
            var $this = $(this);
            //ID слайдера
            var id = 'photo_slider_'+i;
            // $this.find('.slider').attr('id', id);
            $this.find('.slider').attr('id', id);
            //пагинация
            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,
                //resizeReInit: true,
                calculateHeight: true,
                pagination: '.'+paginationClass,
                paginationClickable: true
            });

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

                } else {
                    //$slider.slideNext();
                    $slider.swipeNext();
                }
                
                return false;
            });

            i++;
        });        
    }

UPDATE.
Added this:

var sideSwiper = $('.photo-slider-description').swiper({
              loop: true,
              slidesPerView: 1,
              centeredSlides: true
            });

            var $slider = new Swiper('#' + id, {
                resizeReInit: true,
                calculateHeight: true,
                pagination: '.' + paginationClass,
                paginationClickable: true,
                loop: true,
                onSlideChangeStart: function() {
                  sideSwiper.swipeTo($slider.activeLoopIndex, 0);
                }
            });

As a result, it turned out like this:

if ($('.photo-slider').length) {
        $('.photo-slider').each(function(i){
            //формируем HTML для инициализации слайдера
            var $this = $(this);
            //ID слайдера
            var id = 'photo_slider_'+i;
            $this.find('.slider').attr('id', id);
            //пагинация
            var paginationClass = 'pagination-photo'+i;
            $this.append('<div class="slider-pagination for-photo '+paginationClass+'"></div>');



            var sideSwiper = $('.photo-slider-description').swiper({
              loop: true,
              slidesPerView: 1,
              centeredSlides: true
            });

            var $slider = new Swiper('#' + id, {
                resizeReInit: true,
                calculateHeight: true,
                pagination: '.' + paginationClass,
                paginationClickable: true,
                loop: true,
                onSlideChangeStart: function() {
                  sideSwiper.swipeTo($slider.activeLoopIndex, 0);
                }
            });

            

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

                } else {
                    //$slider.slideNext();
                    $slider.swipeNext();
                }
                
                return false;
            });

            i++;
        });        
    }

<div class="wrapper-photo-slider">
                    <div class="photo-slider contentEffect">
                        <div class="slider effectBottom">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="photo" style="background-image: url(img/photo-1.jpg);"></div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="photo" style="background-image: url(img/photo-2.jpg);"></div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="photo" style="background-image: url(img/photo-1.jpg);"></div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="photo" style="background-image: url(img/photo-2.jpg);"></div>
                                </div>
                            </div>
                        </div>
                        <div class="slider-arrow prev"><i class="icon icon-left-arrow"></i></div>
                        <div class="slider-arrow next"><i class="icon icon-right-arrow"></i></div>
                    </div>

                    <div class="photo-slider-description">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">1111</div>
                          <div class="swiper-slide">2222</div>
                          <div class="swiper-slide">3333</div>
                          <div class="swiper-slide">4444</div>
                        </div>
                    </div>
                </div>

.photo-slider-description {
  position: relative;
  width: 100%;
  background-color: #333;
  color: #ffffff;

  width: 20%;
  float: right;
  height: 100%;
}
.photo-slider-description .swiper-slide {
  -webkit-transition: opacity .6s ease, scale .3s ease;
  transition: opacity .6s ease, scale .3s ease;
  opacity: .25;
}
.photo-slider-description .swiper-slide-active {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  opacity: 1;
}

.wrapper-photo-slider {
  overflow: hidden;
}
.photo-slider {
  width: 80%;
  float: left;
}

Based on here .

Answer 1

Like this, for example

Answer 2

fittextjs.com
freqdec.github.io/slabText