<main>
  <div class="l-container">
    <div class="c-swiperSingle swiper-container js-swiperSingle" data-loop="true" data-pagination-type="bullets" data-autoplay="">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="img"><img src="https://dev.shoya-kajita.com/011/assets/img/screenshot.webp" alt="" /></div>
        </div>
        <div class="swiper-slide">
          <div class="img"><img src="https://dev.shoya-kajita.com/009/assets/img/screenshot.png" alt="" /></div>
        </div>
        <div class="swiper-slide">
          <div class="img"><img src="https://dev.shoya-kajita.com/010/assets/img/screenshot.png" alt="" /></div>
        </div>
        <div class="swiper-slide">
          <div class="img"><img src="https://dev.shoya-kajita.com/011/assets/img/screenshot.webp" alt="" /></div>
        </div>
        <div class="swiper-slide">
          <div class="img"><img src="https://dev.shoya-kajita.com/009/assets/img/screenshot.png" alt="" /></div>
        </div>
        <div class="swiper-slide">
          <div class="img"><img src="https://dev.shoya-kajita.com/010/assets/img/screenshot.png" alt="" /></div>
        </div>
      </div>
      <div class="c-swiperSingle__pg">
        <div class="swiper-button-prev">◀︎</div>
        <div class="swiper-button-next">▶︎</div>
      </div>
      <div class="c-swiperSingle__pagination">
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</main>

$screen4: 768;
@mixin pc_w($w: $screen4) {
  @media (min-width: #{$w+1}px) {
    @content;
  }
}
@mixin sp_w($w: $screen4) {
  @media (max-width: #{$w}px) {
    @content;
  }
}

@function liquid($px) {
  @return $px * 1rem;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef0f2;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400;
  font-size: calc(100 / var(--base-vw) * 1vw);
  @include pc_w() {
    --base-vw: 1440;
  }
  @include sp_w() {
    --base-vw: 375;
  }
  background-size: cover;
  background-repeat: no-repeat;
  overscroll-behavior: none;
}

main {
  width: 100vw;
  overflow: hidden;
}

.l-container {
  width: 96vw;
  margin: 0 auto 84px;
}

// --------------------------

// lib 上書き

// --------------------------
// コンテナ
.swiper-container {
  overflow: initial !important;
}
// ページャー
.swiper-button-next,
.swiper-button-prev {
  position: relative;
  top: initial;
  left: initial;
  right: initial;
  bottom: initial;
  background-image: initial;
  margin: initial;
  color: #161616;
  font-size: liquid(24);
  &::after {
    display: none;
  }
  // hover
  opacity: 1;
  transition: 0.4s ease opacity;
  &:hover {
    opacity: 0.5;
  }
}
.swiper-button-next {
}
.swiper-button-prev {
}
// 無効状態
.swiper-button-disabled {
}
// スクロールバー
.swiper-scrollbar {
  height: liquid(6);
  border-radius: liquid(6);
  background: #e9e9e9;

  .drag {
    height: liquid(10);
    background: #161616;
    border-radius: liquid(6);
  }
}
// ページネーション
.swiper-pagination {
  position: relative !important;
  top: initial !important;
  left: initial !important;
  right: initial !important;
  bottom: initial !important;
  margin: initial !important;
  padding: 20px 0;

  // ・
  .swiper-pagination-bullet {
    width: liquid(16) !important;
    height: liquid(16) !important;
    &.swiper-pagination-bullet-active {
      background: #161616;
      width: liquid(16) !important;
      height: liquid(16) !important;
    }
  }

  // 数字
  font-size: liquid(20);
  .swiper-pagination-current {
    font-size: liquid(20);
  }
  .swiper-pagination-total {
    font-size: liquid(20);
  }
}

// --------------------------

// 単体スライド

// --------------------------
.c-swiperSingle {
  position: relative;
  z-index: 0;
}
.c-swiperSingle__pg {
  display: flex;
  align-items: center;
  gap: liquid(24);
}
.c-swiperSingle__scrollbar {
}
.c-swiperSingle__pagination {
}
.js-swiperSingle {
  width: liquid(400 + 24);

  .swiper-wrapper {
    height: 100%;
  }
  .swiper-slide {
  }

  .img {
    height: 100%;
    width: max-content;
    height: liquid(300);
    width: liquid(400 + 24);
    img {
      width: liquid(400);
      height: 100%;
      object-fit: cover;
    }
  }
}

  class SwiperSingle {
    constructor() {}

    reset() {
      if (this.swiperList.length) {
        this.classList.forEach((data, i) => {
          data.destroy();
          if (i === this.swiperList.length - 1) {
            this.swiperList = [];
          }
        });
      }
    }

    init() {
      this.classList = [];
      this.swiperList = [...document.querySelectorAll(".js-swiperSingle")];

      if (this.swiperList.length > 0) {
        this.swiperList.forEach((ele) => {
          const config = {
            loop: ele.getAttribute("data-loop") === "true",
            speed: 400,
            autoplay: ele.getAttribute("data-autoplay") === "true",
            slidesPerView: "auto",
            loopAdditionalSlides: 1,
            spaceBetween: 0,
            paginationClickable: true,
          };

          const nextBtn = ele.querySelector(".swiper-button-next"),
            prevBtn = ele.querySelector(".swiper-button-prev");
          if (nextBtn && prevBtn) {
            config.navigation = {
              nextEl: nextBtn,
              prevEl: prevBtn,
            };
          }

          const pg = ele.querySelector(".swiper-pagination");
          if (pg) {
            // type: bullets, fraction
            config.pagination = {
              el: pg,
              type: ele.getAttribute("data-pagination-type"),
            };
          }

          const scrollbar = ele.querySelector(".swiper-scrollbar");
          if (scrollbar) {
            config.scrollbar = {
              el: scrollbar,
              hide: false, // ユーザー操作後にスクロールバーを非表示にしない
              draggable: true, // ドラッグ操作を可能にする
              dragClass: "drag",
              snapOnRelease: true, // スクロールバーを離したときにスライダーの位置を固定しないようにする
            };
          }

          const obj = new Swiper(ele, config);
          obj.on("slideChange", (e) => {
            setTimeout(() => {
              const index = obj.activeIndex; // 複製したスライドを含むindex番号
              const realIndex = obj.realIndex; // 複製前のスライドのindex番号
            }, 100);
          });
          this.classList.push(obj);
        });
      }
    }
  }
  const single = new SwiperSingle();
  single.init();