Written by Kasumi

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スライダーで次のスライドを少し見せて表示する方法について紹介しました。

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

目次

関連記事

Swiper

Swiperスライダーで外部の関数から動的にスライド位置を変更する方法

更新日:2022.11.25
457
Swiper

Swiperスライダーで最初に表示されるスライド位置を変更する方法

更新日:2022.11.25
677
Swiper

【swiper】スライド時にズーム機能をつけれるスライダーを実装【簡単】

更新日:2022.11.25
1409
Swiper

Swiperのデフォルト矢印を消して、任意の画像に変更する方法

更新日:2022.11.26
688