カルーセルやスライダーを実装する為のCSS・JSライブラリにはBootstrapやFlexSlider等いくつかありますが、その中でも「Swiper」はおすすめのフレームワークライブラリーです。
Bootstrapも簡単にカルーセルスライダーが実装できますがバリエーションが少ないのが欠点。
また、ギャラリータイプのスライダーが実装可能なFlexSliderはjQueryのバージョンに依存するので、他のjQueryバージョンを使うテーマやプラグインと相性が悪く、動かない事がある。
その点「Swiper」は、バリエーションが豊富でありまして、また、jQueryが不要である事から汎用的です。
・タイプ:Default(ループなし、指やマウスでスワイプする基本のタイプ)
・タイプ:Navigation(ループなし、左右の矢印ナビゲーション付き)
・タイプ:Pagination(ループなし、ページネーション付き)
・上記組み合わせ(ナビゲーション、ページネーション付き)+ループ
・上記+オートプレイ
といった具合に基本のスライダーは簡単に実装可能。
「Swiper」の魅力はここからです。一般的なスライダータイプ以外にも様々なバリエーションがあります。
・タイプ:Thumbs Gallery
・タイプ:Effect Cube
・タイプ:Effect Coverflow
使い方は「Swiper」の公式サイトを参照ください。
〇「Swiper」公式サイト
〇インストールおよび使い方
https://swiperjs.com/get-started
〇詳細な設定、カスタマイズ
https://swiperjs.com/swiper-api
〇デモ