書ケドモ書ケドモ終ワリ無キ記事締メ切リ
Hello everyone! Today I’m going to talk about the jQuery plugin! Thank you! Goodbye, see you next article!ことDJよろずやです。
ついこないだ記事書いたと思ったらすぐ次の締め切りが来ちゃうもんだから、困っちゃうんだな、これが。
近況報告ですが、最近「クラフトピア」という“僕の考えた最強のゲーム”的なものにハマってしまい、無限に時間を吸われて困っています。
学生時代もマインクラフトで無限に時間を吸われていたDJよろずやは案の定無限にプレイしています。
今なら早期アクセス版でプレイができて、Steamで10%引きなのでぜひプレイしましょう。
なんなら私とマルチプレイしましょう。Let’s enjoy play!
さて、本題でございますが、
皆さんはコーディングでスライダーを実装する際にどうしていますか？
jQueryプラグインですか？
Javascriptですか？
もしかしてCSSオンリーで実装する変わり者だったりしますか？
私はjQueryいらずで利用可能なswiperを使用しています。
結構便利ですよ、いや本当に。便利便利。
というわけでおすすめスライダープラグイン3選、行ってみましょう。
拍手👏。
おすすめスライダープラグイン3選
いろんなサイトで見かけるスライダーですが、一見実装が簡単そうに見えて、簡単なんです。
はい、簡単に見えるし、実際簡単なんです。
というのも、最近はjQueryプラグインが豊富にあったり、jQueryいらずのプラグインがあるし、解説記事がたくさんあるので困らないんですよね。
※jQueryプラグインを使用する場合は、jQuery本体を<head>に宣言する必要があります。
今回はDJよろずやが色んなプラグインを使った中で割とおすすめなものを3つご紹介します。
一押しスライダー”Swiper”
| 公式 | https://swiperjs.com/ |
| GitHub | https://github.com/nolimits4web/swiper |
| デモ | https://swiperjs.com/demos/ |
| おすすめ度 | ★★★★☆ |
DJよろずやが普段使っているスライダーです。
jQuery本体が不要かつオプションが豊富なため、どんなデザインでもだいたい実装が可能です。
そのほかアニメーションが豊富だったり、callback関数も充実しています。
難点としては、flexプロパティを使用しているため、割と最近のブラウザでの対応になると思います。
ver2.x.xなら古いブラウザにも対応しているみたいですが、動作未検証のため、わからないですね。
公式サイトを見るに、「Adobe」「BMW」「Disney」「LACOSTE」「PEUGEOT」「verizon」「vodafone」など様々有名企業でも採用されているプラグインとなります。
困ったときは使っておけ”Slick”
| 公式 | https://kenwheeler.github.io/slick/ |
| GitHub | https://github.com/kenwheeler/slick/ |
| デモ | https://kenwheeler.github.io/slick/#demos |
| おすすめ度 | ★★★★☆ |
Swiperと2強なんじゃないかと思っているスライダーです。
シンプルなスライダーを実装したいときにはslickの方を使った方が簡単かもしれません。
カルーセル向けのオプションが充実しています。
よろずや的デメリットは、next/prevボタンやページネーションのカスタマイズがややめんどくさいところです。
よろずや的メリットとしては、スライダーの初期化が簡単なところです。
例えば、何かのアクションがあった時にスライダーを初期化して再描画、など。
そういうことがしたいときにはslickを使用しています。
王道を往く”bxSlider”
| 公式 | https://bxslider.com/ |
| GitHub | https://github.com/stevenwanderski/bxslider-4 |
| デモ | https://bxslider.com/examples/ |
| おすすめ度 | ★★★☆☆ |
スライダーといえばまず聞くであろう、この子。
基本的な機能は大体そろっていることと、日本語の導入記事が数多く存在することから、初心者の方でも安心して利用できるプラグインです。
私が使用していた当時は、レスポンシブやループ機能に少々難がありましたが、その後修正されたんですかね？
バグが発生しやすくて泣かされた記憶があります。
おわりに
Webサイトで当たり前になったスライダーもプラグインのおかげでだいぶ敷居が低いものになりました。変態ちょっと変わった人はCSSだけでスライダーを実装しちゃったりもします。
とりあえずはSwiperかSlickを使用しておけば問題ないので、ぜひ利用してくださいね。