• JavaScript

Swiperでスライドの幅を固定・中央寄せにする方法

Swiperスライダーでスライドの幅を固定したい。

スライドの幅を固定した際、アクティブのスライドを中央寄せにしたい。

本記事ではこのような悩みを解決します。

実装サンプル

See the Pen
Swiper スライド幅を固定する方法 by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

スライドを横幅100pxで固定。

アクティブなスライドを中央寄せにしてます。

実装手順は以下の通りです。

CSSでスライド幅を調整

.swiper-slide {
  /*スライドの幅を指定*/
  width: 200px;
}

まず最初にCSSで調整します。

swiper-slideクラス要素に対し任意の横幅をwidthプロパティで指定します。

スライド幅を指定できるようにオプションを指定する

const swiper = new Swiper(".swiper", {
     loop: true, //ループ
    centeredSlides: true, // アクティブなスライドを中央にする
    slidesPerView: "auto",// autoにする
    spaceBetween: 20, // スライド間の距離
});

最後にswiperの実行関数にオプションを追加します。

以下オプションを指定します。

slidesPerViewプロパティ
値をautoにする事で常にスライドが見えるようにします。

centeredSlidesプロパティ
値をtrueにする事でアクティブなスライドを中央寄せにできます。

loopプロパティ
tureにしないとアクティブなスライドが中央寄せにならないです。

上記プロパティを指定する事でアクティブなスライドを中央寄せ且つ幅を固定できます。

以上で実装完了です。

まとめ

Swiperでスライドの幅を固定・中央寄せにする方法について紹介しました。

以上で解説を終わります。