<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<div class="content">

      <div class="swiper swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img1.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img3.jpg" alt="" />
          </div>
              <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img1.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img3.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="swiper swiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img4.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img5.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img6.jpg" alt="" />
          </div>
              <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img7.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img4.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="https://coding-alive.jp/codepen/img5.jpg" alt="" />
          </div>
        </div>
      </div>

    </div>

.content{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
}

.swiper{
  height: 100%;
  width: calc(50% - 10px);
  position: absolute!important;
  &.swiper1{
    left: 0;
    top: 0;
  }
  &.swiper2{
    left: calc(50% + 10px);
    top: 0;
  }
}
/* スライドの動き等速 */
.swiper-wrapper {
  transition-timing-function: linear;
}
/* 画像のサイズ調整 */
.swiper-slide {
  img {
    height: 100%;
    width: 150%;
    margin-left: -25%;
    max-width: none;
    object-fit: cover;
    transform: skew(10deg);
  }
}

  const swiper1 = new Swiper(".swiper1", {
    direction: 'vertical',
    loop: true,
    slidesPerView: 2,
    speed: 6000,
    allowTouchMove: false,
    spaceBetween: 20,
    autoplay: {
      delay: 0,
    },
  });
  const swiper2 = new Swiper(".swiper2", {
    direction: 'vertical',
    loop: true,
    slidesPerView: 2,
    speed: 6000,
    allowTouchMove: false,
    spaceBetween: 20,
    autoplay: {
      delay: 0,
      reverseDirection: true
    },
  });