<main>
  <div class="l-container">
    <div class="c-swiperAuto swiper-container js-swiperAuto">
      <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>
  </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 {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  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;
}

h2 {
  font-size: liquid(28);
  line-height: 160%;
}

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

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

// 自動スライド

// --------------------------
.js-swiperAuto {
  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;
    }
  }
}

class SwiperAuto {
  constructor(duration = 30000) {
    this.config = {
      speed: duration,
      loop: true,
      slidesPerView: "auto",
      spaceBetween: 0,
      loopAdditionalSlides: 1,
      allowTouchMove: false, // スワイプ操作をできないようにする
      autoplay: {
        delay: 0, // 0にすることで流れ続けるようになる
        disableOnInteraction: false,
      },
    };
  }

  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-swiperAuto")];
    if (this.swiperList.length > 0) {
      this.swiperList.forEach((ele) => {
        const wrap = ele.querySelector(".swiper-wrapper");
        wrap.setAttribute("style", "transition-timing-function: linear !important;");
        const data = new Swiper(ele, this.config);
        this.classList.push(data);
      });
    }
  }
}
const auto = new SwiperAuto();
auto.init();