• Swiper

Swiperスライダーで次のスライドを少し見せて表示する方法

Swiperスライダーでスマホのデバイスの時、次のスライドを少し見せて表示したい。

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

実装例を元に解説します。

実装サンプル

See the Pen
Swiperで次のスライドをチラ見せする方法 by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

次のスライド（黄色のスライド）が少し表示されています。

実装方法は以下の通りです。

slidesPerViewプロパティを追加

const swiper = new Swiper(".swiper", {
    // 次のスライドを少し見せる
  	slidesPerView: 1.2,
    // 前後の矢印
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    //　ブレイクポイント     
    breakpoints: {
    // 767px以上は次のスライドを見せない
    767: {
      slidesPerView: 1,
    }
  }
});

スマホの時だけ、次のスライドを少し見せるコード例です。

SwiperのオブジェクトにslidesPerViewを追加します。

slidesPerViewは表示させるスライドの枚数を指定出来るプロパティです。

slidesPerViewの値に表示させたい枚数を数値で入力。

少し見せたい割合を小数点で指定します。

スマホの時だけ設定したい場合はbreakpointsを追加。

breakpointsで指定したデバイス幅の時は、slidesPerViewの値を少数点無しに変更すればOKです。

以上で実装完了です。

まとめ

Swiperスライダーで次のスライドを少し見せて表示する方法について紹介しました。

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