バリエーション豊富で高機能なスライダー「Swiper」 – フレームワーク

カルーセルやスライダーを実装する為のCSS・JSライブラリにはBootstrapやFlexSlider等いくつかありますが、その中でも「Swiper」はおすすめのフレームワークライブラリーです。

Bootstrapも簡単にカルーセルスライダーが実装できますがバリエーションが少ないのが欠点。

また、ギャラリータイプのスライダーが実装可能なFlexSliderはjQueryのバージョンに依存するので、他のjQueryバージョンを使うテーマやプラグインと相性が悪く、動かない事がある。

その点「Swiper」は、バリエーションが豊富でありまして、また、jQueryが不要である事から汎用的です。

・タイプ:Default(ループなし、指やマウスでスワイプする基本のタイプ)

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

・タイプ:Navigation(ループなし、左右の矢印ナビゲーション付き)


・タイプ:Pagination(ループなし、ページネーション付き)


・上記組み合わせ(ナビゲーション、ページネーション付き)+ループ


・上記+オートプレイ

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

といった具合に基本のスライダーは簡単に実装可能。

「Swiper」の魅力はここからです。一般的なスライダータイプ以外にも様々なバリエーションがあります。

・タイプ:Thumbs Gallery


・タイプ:Effect Cube


・タイプ:Effect Coverflow


使い方は「Swiper」の公式サイトを参照ください。

〇「Swiper」公式サイト

 https://swiperjs.com


〇インストールおよび使い方

 https://swiperjs.com/get-started


〇詳細な設定、カスタマイズ

 https://swiperjs.com/swiper-api


〇デモ

 https://swiperjs.com/demos

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です