3つのスライダーを同時に動かす

<div class="c-slider-1 js-slider-1-scope">
  <div class="c-slider-1__slide-wrap">
      <!-- Slider main container -->
      <div class="c-slider-1__slide c-slider-1__slide--1 swiper js-slider-1-1">
          <!-- Additional required wrapper -->
          <div class="c-slider-1__wrapper swiper-wrapper">
          <!-- Slides -->
          <div class="c-slider-1__item c-slider-1__item--1 swiper-slide">Slide 1-1</div>
          <div class="c-slider-1__item c-slider-1__item--2 swiper-slide">Slide 1-2</div>
          <div class="c-slider-1__item c-slider-1__item--3 swiper-slide">Slide 1-3</div>
          </div>
      </div>

      <!-- Slider main container -->
      <div class="c-slider-1__slide c-slider-1__slide--2 swiper js-slider-1-2">
          <!-- Additional required wrapper -->
          <div class="c-slider-1__wrapper swiper-wrapper">
          <!-- Slides -->
          <div class="c-slider-1__item c-slider-1__item--1 swiper-slide">Slide 2-1</div>
          <div class="c-slider-1__item c-slider-1__item--2 swiper-slide">Slide 2-2</div>
          <div class="c-slider-1__item c-slider-1__item--3 swiper-slide">Slide 2-3</div>
          </div>

      </div>

      <!-- Slider main container -->
      <div class="c-slider-1__slide c-slider-1__slide--3 swiper js-slider-1-3">
          <!-- Additional required wrapper -->
          <div class="c-slider-1__wrapper swiper-wrapper">
          <!-- Slides -->
          <div class="c-slider-1__item c-slider-1__item--1 swiper-slide">Slide 3-1</div>
          <div class="c-slider-1__item c-slider-1__item--2 swiper-slide">Slide 3-2</div>
          <div class="c-slider-1__item c-slider-1__item--3 swiper-slide">Slide 3-3</div>
          </div>

      </div>

      <div class="c-slider-1__btn-wrap">
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
      </div>

  </div>
</div>
<!-- [/c-slider-1] -->

.c-slider-1 {
  margin-inline: auto;
  position: relative;
}

.c-slider-1__slide-wrap {
  width: 92%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 16/9;
}

.c-slider-1__slide {
  width: 100%;
}

.c-slider-1__slide--1 {
  grid-area: 1/1/3/2;
}

.c-slider-1__slide--2 {
  grid-area: 1/2/2/3;
}

.c-slider-1__slide--3 {
  grid-area: 2/2/3/3;
}

.c-slider-1__item {
  display: grid;
  place-content: center;
}

.c-slider-1__slide--1 .c-slider-1__item--1 {
  background-color: gray;
}

.c-slider-1__slide--1 .c-slider-1__item--2 {
  background-color: rgba(128, 128, 128, 0.6);
}

.c-slider-1__slide--1 .c-slider-1__item--3 {
  background-color: rgba(128, 128, 128, 0.3);
}

.c-slider-1__slide--2 .c-slider-1__item--1 {
  background-color: rgba(0, 0, 0, 0.6);
}

.c-slider-1__slide--2 .c-slider-1__item--2 {
  background-color: rgba(0, 0, 0, 0.4);
}

.c-slider-1__slide--2 .c-slider-1__item--3 {
  background-color: rgba(0, 0, 0, 0.2);
}

.c-slider-1__slide--3 .c-slider-1__item--1 {
  background-color: rgba(128, 128, 128, 0.3);
}

.c-slider-1__slide--3 .c-slider-1__item--2 {
  background-color: gray;
}

.c-slider-1__slide--3 .c-slider-1__item--3 {
  background-color: rgba(128, 128, 128, 0.6);
}

.c-slider-1__btn-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.c-slider-1__btn-wrap .swiper-button-next2,
.c-slider-1__btn-wrap .swiper-button-prev2 {
  position: static;
}

document.addEventListener('DOMContentLoaded', () => {
    'use strict';
    const scopes = document.querySelectorAll('.js-slider-1-scope'); //スコープ

    for (let i = 0, l = scopes.length; i < l; i++) {
        const thisScope = scopes[i],
            thisSlide1 = thisScope.querySelector('.js-slider-1-1'),
            thisSlide2 = thisScope.querySelector('.js-slider-1-2'),
            thisSlide3 = thisScope.querySelector('.js-slider-1-3'),
            nextButtons = thisScope.querySelector('.swiper-button-next'),
            prevButtons = thisScope.querySelector('.swiper-button-prev');

        const swiper1 = new Swiper(thisSlide1, {
            loop: true,
            speed: 300,
            spaceBetween: 20,
            allowTouchMove: false
        });

        const swiper2 = new Swiper(thisSlide2, {
            loop: true,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            speed: 600,
            allowTouchMove: false,
            navigation: {
                nextEl: nextButtons,
                prevEl: prevButtons
            }
        });

        const swiper3 = new Swiper(thisSlide3, {
            loop: true,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            allowTouchMove: false,
            speed: 600,
            navigation: {
                nextEl: nextButtons,
                prevEl: prevButtons
            }
        });

        swiper1.controller.control = swiper2;
        swiper2.controller.control = swiper1;
        swiper3.controller.control = swiper1;
    }
});