こんにちは、ウェブラボクリエイターズメモです。
今回は、多機能なスライダー実装できるjQueryプラグイン「slick」を紹介したいと思います。
最近個人的にスライダーを色々カスタマイズすることがあり、その際に使ってみてとても便利だったので備忘録としてここに書いときます。
まずは公式サイトからプラグインをダウンロードしてきます。ヘッダーのメニューに「get it now」とあるのでクリック、そこに「Download Now」ボタンがあります。
では実装していきます。まずはDEMOをご覧下さい。
メイン画像とサムネイル画像を連動させたウィンドウ幅いっぱいのスライダーを実装してみました。
少し設定が複雑ですが、解説していきます。
HTMLhead内に以下のようにCSSの読み込みとスクリプトを記述します。（別にhead内である必要はありません）
■HTMLhead部分
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
<script>
$(function() {
$('#slider01').slick({ //メインのスライダーにしたい要素
infinite: true, //スライドをループさせるか
arrows: true, //前後ボタンの表示
dots: true, //点の表示
variableWidth: true, //横幅が異なるスライドにするか
autoplay: true, //自動切り替え
autoplaySpeed: 5000, //自動切り替えにかかる時間
centerMode: true, //要素を中央へ
asNavFor: '#slider02', //サムネイルのスライダーを指定
responsive: [{
breakpoint: 640, // 横幅640px以下で挙動変更
settings: {
variableWidth: false,
centerMode: false
}
}]
});
$('#slider02').slick({ //サムネイルのスライダーにしたい要素
infinite: true, //スライドをループさせるか
arrows: true, //前後ボタンの表示
slidesToShow: 3, //表示する要素の数（ある程度設定しないとうまく動作しない？）
variableWidth: true, //横幅が異なるスライドにするか
autoplay: true, //自動切り替え
autoplaySpeed: 5000, //自動切り替えにかかる時間
centerMode: true, //要素を中央へ
asNavFor: '#slider01', //メインのスライダーを指定
focusOnSelect: true //クリックしたスライドにフォーカス
});
});
</script>
スライダー部分のHTMLやCSSはお好みで調整してください。
■HTMLスライダー部分
<div class="slider"> <ul id="slider01"> //メインのスライダーにしたい要素 <li><img src="img/001.jpg" width="980" height="500" alt=""></li> <li><img src="img/002.jpg" width="980" height="500" alt=""></li> <li><img src="img/003.jpg" width="980" height="500" alt=""></li> <li><img src="img/004.jpg" width="980" height="500" alt=""></li> <li><img src="img/005.jpg" width="980" height="500" alt=""></li> </ul> </div> <div class="slider"> <ul id="slider02"> //サムネイルのスライダーにしたい要素 <li><img src="img/006.jpg" width="196" height="110" alt=""></li> <li><img src="img/007.jpg" width="196" height="110" alt=""></li> <li><img src="img/008.jpg" width="196" height="110" alt=""></li> <li><img src="img/009.jpg" width="196" height="110" alt=""></li> <li><img src="img/010.jpg" width="196" height="110" alt=""></li> </ul> </div>
必要な記述は以上です。640px以下でメインのスライダーの挙動が変わりますのでウィンドウ幅を縮めてみてください。
他のプラグインとかでウィンドウ幅いっぱいのスライダーを実装しようとするとかなり面倒だったり、うまくいかなかったりしたので便利なプラグインを見つけた！って感じです。
しかも自分でブレークポイントを決めて設定を変えられるのはとても便利ですね。
「slick」自体は結構前から知っていたのですが、なかなか使う機会が無かったのでもっと早く使ってれば良かったなと思います。
プラグインの設定などわりと上級者向けのスライダーですが、ものすごい多機能なのできっと皆さんの要望にも応えてくれるでしょう。
対応ブラウザですが、どうやらIE8から動くみたいですね。
以上、クリエイターズメモでした。
こんにちは、ウェブラボクリエイターズメモです。
