<main>
  <div class="l-container">
    <div
      class="c-swiperSingle swiper-container js-swiperSingle"
      data-loop="false"
      data-fit="true"
      data-pagination-type="bullets"
    >
      <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__scrollbar">
        <div class="swiper-scrollbar"></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);
  // height: liquid(300);

  .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;
    }
  }

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

  // コンテンツ幅ぴったり

  // --------------------------
  &[data-fit="true"] {
    width: 100%;
    .swiper-slide {
      width: liquid(400 + 24) !important;
      &:nth-last-of-type(1) {
        width: liquid(400) !important;
      }
    }
  }
}

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();