ケイタ【くるくる】カルーセルを実装できる評価が高いjQueryプラグイン5選ツイート3シェアはてブ39Pocket138「なんかあのくるくる横にスライドしていく機能を付けたい!」という要望は制作案件には頻出です。カルーセルを実装するjQueryプラグインはいくつもありますが、今回はJavaScriptに特化した検索サイトJavascripting.comから評価が高いものを紹介します。最後にカルーセルとはカルーセルとは、遊園地の回転木馬や回転式コンベアなどの意味を持つ英語の名詞です。(cf.carousel)Webのくるくる回転するような動きをするパーツに対しても使われます。Web技術に詳しくない人にはカルーセルと呼ぶよりもスライダーと呼んだ方が通じます。実際、カルーセル系のjQueryプラグインにはsliderと名前が付くものもたくさんあり、呼び方はどっちでもいいのかもしれません。評価が高いカルーセルjQueryプラグインslickJavascripting.comでも一番評価が高いのがslickです。needと書かれており、それだけ自信を持って提供されているプラグインになります。実際、普通の1枚ずつスライドするカルーセルはもちろん、レスポンシブ対応もでき、幅の異なる要素をスライドさせることもできます。カルーセルを導入するときはslickをはじめに参照すると捗ると思います。カルーセルを使いたい要素に以下のHTMLを作成します。href="slick/slick-theme.css"/>body閉じタグ直前に以下のスクリプトを読み込みます。(jQueryの読み込みはこの記述よりも前で行います。src="slick/slick.min.js"></script>最後に、JavaScriptファイル内に以下の記述をすればslickの導入が可能です。});});デモや詳細ドキュメントはslick公式ページから見れます。slick公式ページBxsliderslickの次に評価されているのがBxsliderです。定期的にアップデートが行われており、現在はバージョン4のようです。Bxsliderはデフォルトでレスポンシブ対応しています。豊富にオプションが用意されており、どんなプロダクトにも柔軟に適用できると思います。実装は、まずjQueryを読み込んだ後に以下の記述をhead内に書き込みます。/>そして、カルーセル部分には例えば以下のように書きます。</ul></div>公式ドキュメントではdivで囲んでいませんが、divで囲まないとスマホで表示されない場合があるので私はこう書いています。あとはJavaScript内で次の記述をすれば完了です。$('.bxslider').bxSlider();});日本語のWeb系ブログで実装方法がたくさん紹介されているので英語に不慣れの人は「Bxslider」でググってみましょう。デモは公式サイトにサンプルと実装方法がたくさん紹介されています。2はECサイトテーマとして有名なWooCommerce提供元が提供しているカルーセルプラグインです。ECサイトでカルーセル機能はよく使われることもあってサムネイル画像のカルーセルをさまざまなデザインパターンで実装できます。</ul></div>あとはJavaScriptファイル内に以下の記述をすればOKです。オプションもたくさん用意されています。});slickやbxsliderと比較すると少し読み込みが遅い気もしますが、WooCommerce製のテーマを使用しているなら相性がいいと思います。デモページは公式ページにあります。SwiperSwiperを用いるとモバイルデバイスでスワイプできるカルーセルを実装できます。オプション機能も豊富です。Swiperで特徴的なのが立体的なスライドアニメーションとネスト化です。これが簡単に実装できることがSwiperを選ぶ決め手になってる人もいると思います。実装は、まずjQuery読み込み後にhead内でSewiperを読み込みます(3.x.xはダウンロードしたバージョンに変更してください。CDNで読み込めるのがうれしいですね。src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>カルーセルは例えばこんな感じに作りましょう。class="swiper-scrollbar"></div></div>あとはJavaScriptファイル内に以下の記述をすればOKです。});このSwiperプラグインはやや中級者向きだと思います。デモはこちらから見れます。lightSliderはその名前の通り「軽さ」が特徴的なカルーセルプラグインです。レスポンシブ対応やオプション機能の豊富さなど他のカルーセルプラグインに引けを取りません。</li></ul>JavaScriptファイルに以下の記述をして完了です。});おそらく実装は今回紹介した中で一番わかりやすいと思います。デモは公式ページから見てください。lightSliderデモ最後にカルーセル機能を実装するjQueryプラグインは現在slickの一強状態のようですが、いくつか種類とその特徴を知っておけば捗ると思います。少なくとも3つぐらいは実装まで試してみるといいかもしれませんね。IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイート3シェアはてブ39Pocket138この記事をかいた人ケイタ都内に潜むWebエンジニア。制作/運用/データ解析など幅広くやってます。応援は@keitaoriginalからどうぞ。