[swiper]スライドを任意の幅にして領域いっぱいに並べる方法

こんな感じ
swiper.jsのだるいところ
swiper.jsのいいところ

こんな感じ

本体と設定のscriptは描画位置のしたに記述する。
</body>直前にしておけばいい。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        <div class="swiper-slide">...</div>
        ⋮
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="scripts.js"></script>

今回やりたいことのネックは「slidesPerView」。

const swiper = new Swiper('.swiper', {
  loop: true,
  loopAdditionalSlides: 1,
  slidesPerView: "auto",
  centeredSlides: true,
  spaceBetween: 16,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

幅はcssで指定する。

.swiper{
    .swiper-wrapper{
        .swiper-slide{
            width: 200px;
        }
    }
}

slick.jsと違ってswiper.jsではスライド同士の間隔をjsで指定できるんで、cssは表示内容だけいじればいいのが楽ですね。

swiper.jsのだるいところ

jsの読み込みが<head>じゃないのがだるい。
極力一箇所にまとめたい癖があるためいつもモヤモヤやする。

classをそれぞれに付けなきゃいけないのもめんどくさいし、入れ子も多いし、arrowsとかもhtml上で仕込んでおかないといけない。
jsで完結しないことが多めなので、後からライブラリを差し替えるときになかなかの面倒がある。

swiper.jsのいいところ

今回みたいに複数のスライドが並んで表示されてるとき、思いっきりスワイプしたら数枚分ずらせる。

slick.jsだと、一定量以上のスワイプでスライドするのはいいんだけど、どんなに動かしても１枚しか動かない。
なので、今回みたいなときにswiperはとてもいい。