画像をスライドで切り替えていくカルーセル機能は数多くのWebサイトで実装されています。サイトの機能を紹介するのに使ったり、ギャラリーとして画像を切り替えるのにも使えます。アイディア次第で使いところが多い機能です。 便利さゆえに多数のライブラリが出てきていますが、もうこれで十分ではないかと思わせるのがslickです。多彩な機能を揃え、オプションも豊富なカルーセルライブラリです。

slickの使い方

まずはサンプルと一緒に。これが一番ベーシックな使い方です。

$("target").slick() で実現されます。

レスポンシブにも対応しています。

フリック操作で切り替えも可能です。

複数のスライドを同時に見せることもできます。

画像読み込みを遅延させることもできます。

左右からの表示だけでなくフェードインなどのアニメーションもできます。

スライドを追加したり削除するのも自由です。

スライドを切り替える際の丸い印をクリックすれば一気にそのスライドまでジャンプできます。メソッドも豊富なので、slickを外部から操作するのも簡単です。オプションもたくさん用意されているので自分の好みに合わせた動作変更も簡単でしょう。

slickはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

slick - the last carousel you’ll ever need kenwheeler/slick