スライダーのエフェクトの方法は主にスライドとフェードの2種類かと思いますが、Swiperには他にも個性的なエフェクトがあります。
実務ではあまり使わないかも知れませんが、ポートフォリオや自社サイトでは使えるかも知れません。
今回は、そんなエフェクトを全てご紹介していきます。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
【Swiper】カスタマイズ用オプションまとめ一覧
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
Swiperのエフェクトまとめ
まずは、基本となるスライダーを見てみます。
See the Pen
Swiper(矢印、ドットインジケーター) by junpei (@junpei-sugiyama)
on CodePen.
前後の矢印、ページネーションが表示されているシンプルなスライダーです。
今回は、コードを見やすくする為にページネーションは削除したいと思います。
デフォルトの矢印は幅を狭くしたときにちょっと違和感があるかも知れませんが、今回はそのままにしています。
上記のエフェクトはデフォルトの"slide"となります(何も書かないとeffect: 'slide',
になります)。
また、これから紹介していくエフェクトは、確認しやすいようにスピードをデフォルトの300ミリ秒から600ミリ秒(speed: 600,)に遅くしています。
コードはCodePenのJSタブに書かれているので、そちらを参考にして下さい。
そして、JSタブをクリックすれば大きい画面で確認が出来ます。
fade
JavaScriptに加えるオプションは、effect: 'fade',
です(1枚表示のみです)。
See the Pen
Swiperエフェクト(fade) by junpei (@junpei-sugiyama)
on CodePen.
cube
JavaScriptに加えるオプションは、effect: 'cube',
です(1枚表示のみです)。
See the Pen
Swiperエフェクト(cube) by junpei (@junpei-sugiyama)
on CodePen.
coverflow
JavaScriptに加えるオプションは、effect: 'coverflow',
です。
これは枚数を変更出来ますが、3枚以外はあまり使わないかと思います(偶数だと中央に表示されません)。
1枚表示
See the Pen
Swiperエフェクト(coverflow:1枚) by junpei (@junpei-sugiyama)
on CodePen.
3枚表示
See the Pen
Swiperエフェクト(coverflow) by junpei (@junpei-sugiyama)
on CodePen.
flip
JavaScriptに加えるオプションは、effect: 'flip',
です(1枚表示のみです)。
See the Pen
Swiperエフェクト(flip) by junpei (@junpei-sugiyama)
on CodePen.
cards
JavaScriptに加えるオプションは、effect: 'cards',
です(1枚表示のみです)。
See the Pen
Swiperエフェクト(flip) by junpei (@junpei-sugiyama)
on CodePen.
creative
JavaScriptに加えるオプションは、effect: 'creative',
です(1枚表示のみです)。
creativeは、effect
以外にcreativeEffect
を設定する事で、色々なスライドが作れます。
コードはCodePenでご確認下さい。
See the Pen
Swiperエフェクト(creative) by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト(creative02) by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト(creative03) by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト(creative04) by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト(creative05) by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト(creative06) by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は、Swiperスライダーのエフェクトについてまとめてご紹介しました。
実務ではあまり使いそうにないものもありますが、知っておくと実装の幅が広がると思います。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧