Swiperjs – loop with different number of slides (controller-slider + slider)

sorry for my english 🙂

Hello!
How to implement infinite scrolling functionality on the first slider if it is controlled by the second one, and the number of slides is different?
I mean, for example: to have 2 slides on the first slide rotating infinitely, and any number of slides on the second slide, but not infinite

The first thing i tried, of course, was to use
loop: true, but of course I got no result. In the controller there is a specific binding to the index of both slides and because of that the slides are “jumping”

Look on Demo: https://codepen.io/RomanSydor/pen/abaYvod

or code:

JS:

// initialize first swiper
const slider = new Swiper('.myslider', {
  loop: true,
  createElements: true,
  effect: 'flip',
  slidesPerView: 1,
  allowTouchMove: false,
  observer: true,
  mousewheel: true,
  observeParents: true,
  on: {
    slideChange: function () {
        console.log(slider.realIndex);
    },
  },
});

// initialize second swiper
const control = new Swiper('.controller', {
  slidesPerView: 1,
  grabCursor: true,
  touchEventsTarget: '.slider-container',
  allowTouchMove: true,
  observer: true,
  mousewheel: true,
  observeParents: true
});

// synchronize swipers
control.controller.control = slider;
slider.controller.control = control;

HTML:

  <div class="slider-container">
    <div class="swiper-slider myslider">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-color: plum;">Slide 1</div>
        <div class="swiper-slide" style="background-color: orange;">Slide 2</div>
        <div class="swiper-slide" style="background-color: orangered;">Slide 3</div>
      </div>
    </div>
    <div class="swiper-slider controller">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-color: aqua">Controller 1</div>
        <div class="swiper-slide" style="background-color: aquamarine;">Controller 2</div>
        <div class="swiper-slide" style="background-color: greenyellow;">Controller 3</div>
        <div class="swiper-slide" style="background-color: gold;">Controller 4</div>
        <div class="swiper-slide" style="background-color: navajowhite;">Controller 5</div>
      </div>
    </div>
  </div>

CSS:

.slider-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: fantasy;
  text-align: center;
  font-size: 60px;
  font-weight: 600;
  color: antiquewhite;
  text-transform: uppercase;
  text-shadow: 0px 0px 15px #afafaf;
  letter-spacing: 5px;
  gap: 45px;
}

.slider-container .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.myslider {
  width: 300px;
  height: 300px;
}
.myslider .swiper-slide {
  border-radius: 40px;
}

.controller {
  color: #bd67f4;
  letter-spacing: 3px;
  font-size: 22px;
  width: 230px;
  height: 80px;
  overflow: hidden;
}