レスポンシブ対応で簡単にカルーセルを実現! slick.js の使い方

posts_photo
slick.js

レスポンシブ対応でカルーセルを実現するプラグイン「slick.js」を紹介します。
設定できるオプションが豊富で、要件に合わせて手軽にカスタマイズできる便利仕様。スマホでのスワイプ動作にも対応していて、PC/SPともにこのプラグインでいける気がします。

GitHubを見る限りでは、多分IE8以上での動作保証っぽいかな?jQueryのバージョンは1.7以上みたいです。

用意するもの

公式からプラグイン一式をダウンロードしましょう。
その中から最低限必要なものは以下の通り。jQueryとプラグイン本体、一式の中に入っているcssの3つを読み込む必要があります。あ、スライド部分のstyleを指定するメインのcssも必要ですねー。

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slick.css">
<script src="jquery.min.js"></script>
<script src="js/slick.min.js" type="text/javascript"></script>

基本的な使い方

カルーセルにする部分を下記のようにマークアップします。よく見るスライダーはulをさらにもう一つdivか何かで囲むものが多いですが、slick.jsはこれだけでいいらしい。
シンプルで良いですね!
liの中には画像でもテキストでも好きなものを入れて大丈夫です。作る際にはメインのcssでliに対してスタイルを当ててください。

<!--class名は任意で大丈夫です-->
<ul class="slide_area">
  <li><p>カルーセル内の要素をいろいろ入れる</p></li>
  <li><p>カルーセル内の要素をいろいろ入れる</p></li>
  <li><p>カルーセル内の要素をいろいろ入れる</p></li>
  <li><p>カルーセル内の要素をいろいろ入れる</p></li>
  <li><p>カルーセル内の要素をいろいろ入れる</p></li>
</ul>

htmlはこれだけ。あとはjsを記述するだけです。一番シンプルな書き方はこんな感じです。デフォルトでは、スライド一枚をwidth:100%;で表示したスライダーになります。

$('.slide_area').slick();

オプションでカスタマイズする際にはこう書きます。
よく使いそうなオプションをいくつか紹介しましょう。
infinite … ループさせるかどうか
autoplay … 自動再生の有無
pauseOnHover … マウスオーバーで再生の一時停止の有無
slidesToShow … 一度に見えているスライドの枚数指定
slidesToScroll … 一度に何枚分スライドを動かすかの指定
speed … 速度指定

$('.slide_area').slick({
  infinite: true,
  autoplay:true,
  pauseOnHover:true,
  slidesToShow: 3,
  slidesToScroll: 1,
  speed:100
});

ほかには、スライドし終わったらこの関数を動かす、などの動作をつける際の書き方もあります。’afterChange’の部分を’beforeChange’などすれば発火タイミングを変えられます。詳しくは公式で確認してみてください。

//一回スライドするごとにhelloが出力される。
$('.slide_area').slick();
$('.slide_area').on('afterChange', function(event, slick, currentSlide, nextSlide){
  console.log('hello');
});

公式のタイトル部分の添えられた「ラストカルーセル」の言葉どおり、非常に使い勝手の良いプラグインだと思います。

CSS3&jQueryで作る スマートフォンサイトUI図鑑
CSS3&jQueryで作る スマートフォンサイトUI図鑑
– Amazonで見る