投稿日: 投稿者: info@office-tomo.net

バリエーション豊富で高機能なスライダー「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（ループなし、左右の矢印ナビゲーション付き）

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

・タイプ：Pagination（ループなし、ページネーション付き）

・上記組み合わせ（ナビゲーション、ページネーション付き）＋ループ

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

・上記＋オートプレイ

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

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

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

・タイプ：Thumbs Gallery

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

・タイプ：Effect Cube

・タイプ：Effect Coverflow

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

〇「Swiper」公式サイト

　https://swiperjs.com

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

　https://swiperjs.com/get-started

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

　https://swiperjs.com/swiper-api

〇デモ

　https://swiperjs.com/demos

コメントを残す

メールアドレスが公開されることはありません。