かなり強気なタイトルですが実際に最近の案件でSwiperというjavascriptのプラグインを使っております。
もう現場ではSwiper.js以外のJsは必要ないと思います。
Swiper.jsの特徴
Swiperの特徴は下記の通りです。
- Jqueryを使っていない
- オプションがたくさんある
- Demoページのわかりやすさと親切さ
他の優秀なスライダーのプラグイン
Slick
Slickもレイアウトがたくさんあって評判がいいですよ。
bxSlider
bxSliderです。これはかなり昔からあって、レスポンシブのサイトが出だした時に話題になりました。
レスポンシブに対応しているのは当時このスライダーだけだったんじゃないかな。
急に起こるレイアウト変更に対応できる
よく現場で言われるsliderの使い方は
- 次に表示される画像を表示した、サムネイルスライダー
- 前後の画像が画面からはみ出て見えているスライダー
- 上下二段のスライダー
- 縦に動くスライダー
これらのトリッキーな要望にも全部Swiperは応えてくれます。
Sliderって作るの大変なんだよ
スライダーのプラグインってオリジナルで作るにはなかなか骨を折る作業です。
- あわせて読みたい
- jqueryでsliderを自作するなら
単純な画像スライダーだけでは、みんな目が肥えちゃって納得しなくなってきている。
Swiperの特徴は対応するレイアウトがめちゃくちゃ多いってことなんですよね。
Swiperの公式デモページはこちら。
現在デモページには40個のレイアウトがあります。
しかもこれオプションとか組み合わせたら、画面サイズによって変更できるし、無限に実装できます。
- 制作の参考になるサイトはこちら
- Swiperを使用した基本的なスライダー実装から応用まで！実用的な6つのサンプル
- レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」
- jQuery無しで動く！「swiper」がとても便利
ほなね
