カルーセルスライダーのライブラリを試す「slick」編

カルーセルスライダーのライブラリを探してみると評判のいいライブラリが複数ありました。

どれが一番使いやすいかは自分で使ってみないとわからないので、勉強もかねて人気のある10個のライブラリを使い比べてみようと思います。

ライブラリはjavascript.comGithubで「carousel」と検索して、出てきたもので人気順を見て決めました。

 

今回は一番人気の「slick」を試していこうと思います。

スポンサードサーチ



slickの使用方法

slickは公式サイト、またはGithubからダウンロードするか、CDNのリンクを指定することで使用することができます。

ダウンロードの場合、公式サイトの「Download Now」をクリックすると、現状の最新版である「slick-1.8.0.zip」をダウンロードできます。

 

 

CDNの場合、ここでリンクがまとめられています。

slick-carousel – cdnjs.com

ただ、ここで指定できるのは1.7.1までで、最新の1.8.0を指定することはできません。

初めて触る場合は、最新のソースコードを使用した方がいいと思います。

slickの使用感

レスポンシブ対応がスタイルの設定が特になくてもされているのですごく使いやすいです。

オプションのbreakpointでスライダーの幅によって表示数やスクロールページ数をできるの、レスポンシブ時の見た目の調整も簡単にできます。

また、タッチでスライドを可能にするオプション「touchMove」などタッチデバイスの設定もきちんとあります。

人気があるのも納得です。

 

公式サイトに書いてある「the last carousel you’ll ever need」ってすごい自信だなって最初は思いましたが、その通りかもと今は思ってます。

一つ目なのになぁ。あと9個試すつもりなのに。