Webで使えるカルーセルライブラリまとめ

画像の切り替え処理によく使われるのがカルーセルです。横並べにした画像を差し替えながら表示したり、ユーザのクリック操作で切り替えられるものもあります。スマートフォン対応のものはタッチ操作で動かせるようになっています。

今回はそんなカルーセルライブラリをまとめて紹介します。

Glide.js | Simple, responsive and fast jquery carousel slider

左右のDOMが若干斜めになっているのが特徴的です。切り替わる際には斜めのままスライドして中央で水平な向きに変わるアニメーションとなっています。ここは好き嫌いが分かれそうです。レスポンシブ対応になっています。

Glide.js | Simple, responsive and fast jquery carousel slider

Siema – Lightweight and simple carousel with no dependencies

とてもシンプルなカルーセルです。imgタグを並べておいて、それをJavaScriptのイベントで差し替えます。スライドを動的に追加したり、削除もできるようになっています。依存ライブラリがないのが大きなポイントです。

Siema – Lightweight and simple carousel with no dependencies

Unslider, the simplest carousel slider for jQuery

横向きの切り替えだけでなく、縦にも切り替えられるようになっています。さらにスライドの切り替え時に縦横に動くだけでなく、フェードイン/アウトさせることもできます。ループする、しないなど細かく制御できます。

Unslider, the simplest carousel slider for jQuery

jCarousel – Riding carousels with jQuery

jQueryプラグインのカルーセルです。JavaScriptでのスライド切り替えだけでなく、CSS3を使うこともできます。コンテンツはあらかじめ用意する他、Ajaxで取得も可能です。デザインはレスポンシブです。

jCarousel – Riding carousels with jQuery

Swiper – Most Modern Mobile Touch Slider

モバイル対応が特徴となっていますが、スライドの切り替わるアニメーションにも注目して欲しいソフトウェアです。エフェクトが3Dで切り替わるのが格好良いです。前後のスライドは斜めになっていますが、中央へ移動する際のアニメーションも滑らかです。

Swiper – Most Modern Mobile Touch Slider

slick – the last carousel you’ll ever need

一つ一つ切り替える他、まとめて複数のスライドを切り替える機能もあります。さらに幅や高さが異なるスライドが混在する場合にも利用できます。中央にあるスライドだけ若干大きく表示することもできます。画像の遅延読み込みもできるなど、とても多機能なカルーセルです。

slick – the last carousel you’ll ever need

Smoothslides Demo

現在のスライドが若干動きながら表示されるのが効果的なカルーセルです。スライドよりも写真を表示するのに向いているでしょう。どのようにアニメーションするか（ズームや右への動きなど）指定できます。

Smoothslides Demo

Sly

横または縦方向のカルーセルが作れます。パララックスにも対応しており、スライドと背景の動きをずらしながら表示するという効果的な表現もできます。

Sly

---

カルーセルは製品の説明であったり、チュートリアルなど様々な場面で利用できます。ライブラリによって特徴が異なるので、それぞれ把握しておくとぴったり利用できる場面が見つかるでしょう。

ぜひ皆さんのプロジェクトでお役立てください。