レスポンシブ対応でカルーセルを実現するプラグイン「slick.js」を紹介します。
設定できるオプションが豊富で、要件に合わせて手軽にカスタマイズできる便利仕様。スマホでのスワイプ動作にも対応していて、PC/SPともにこのプラグインでいける気がします。
GitHubを見る限りでは、多分IE8以上での動作保証っぽいかな？jQueryのバージョンは1.7以上みたいです。
用意するもの
公式からプラグイン一式をダウンロードしましょう。
その中から最低限必要なものは以下の通り。jQueryとプラグイン本体、一式の中に入っているcssの３つを読み込む必要があります。あ、スライド部分の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');
});
公式のタイトル部分の添えられた「ラストカルーセル」の言葉どおり、非常に使い勝手の良いプラグインだと思います。
