こんにちは、ウェブラボクリエイターズメモです。
以前のクリエイターズメモでスライダーを実装できるjQueryプラグイン「slick」をご紹介しました。
このプラグインは用意されているオプションを設定するだけで実装も可能ですが、もう一歩踏み込んだカスタマイズをすれば、表現の幅がさらに拡がるでしょう。
そこで今回は、スライド枚数が異なるスライダー同士を連携させるカスタマイズをご紹介します。
まずはDEMOをご覧になり、操作感をご確認ください。
→DEMO
メインのスライダーと、サムネイルのスライダーの動作を連携させたカスタマイズとなっております。
要件
今回作成したスライダーカスタマイズの要件は下記になります。
①メインは1枚、サムネイルは4枚表示させる
②メインが「4枚目から5枚目」と「5枚目から4枚目」に切り替わるとき、
サムネイルのスライダーも切り替える③サムネイルをクリックすると、メインも対応したに切り替える
②の要件を満たすには、下記の各スライダーのスライド枚数は下記になります。
- メインのスライダー：スライド枚数が8枚
- サムネイルのスライダー：スライド枚数が2枚、各スライドに要素が4個ずつ
実装方法
1.プラグインのダウンロード
まず公式サイトからプラグインをダウンロードします。
基本的な設定については、以前のクリエイターズメモもご参照ください。
2.「slick」の基本設定
まず、スクリプトの読込、スライダー定義などの基本設定を行います。
■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() {
//メインスライダーの定義
var slider = ".slider_main";
$(slider).slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
accessibility: false,
autoplay: false,
touchMove: false
});
//サムネイルスライダーの定義
var thumbslider = ".slider_thumb";
$(thumbslider).slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
accessibility: false,
autoplay: false,
touchMove: false
});
});
</script>
■HTMLスライダー部分
<!-- メインのスライダーにしたい要素 --> <div class="slider_main"> <div class="slide_block bg01"><p><span>WEBLAB 01</span></p></div> <div class="slide_block bg02"><p><span>WEBLAB 02</span></p></div> <div class="slide_block bg03"><p><span>WEBLAB 03</span></p></div> <div class="slide_block bg04"><p><span>WEBLAB 04</span></p></div> <div class="slide_block bg05"><p><span>WEBLAB 05</span></p></div> <div class="slide_block bg06"><p><span>WEBLAB 06</span></p></div> <div class="slide_block bg07"><p><span>WEBLAB 07</span></p></div> <div class="slide_block bg08"><p><span>WEBLAB 08</span></p></div> </div> <!-- サムネイルのスライダーにしたい要素 --> <div class="slider_thumb"> <div class="slide clearfix"> <div class="slide_block bg01"><p><span>01</span></p></div> <div class="slide_block bg02"><p><span>02</span></p></div> <div class="slide_block bg03"><p><span>03</span></p></div> <div class="slide_block bg04"><p><span>04</span></p></div> </div> <div class="slide clearfix"> <div class="slide_block bg05"><p><span>05</span></p></div> <div class="slide_block bg06"><p><span>06</span></p></div> <div class="slide_block bg07"><p><span>07</span></p></div> <div class="slide_block bg08"><p><span>08</span></p></div> </div> </div>
3.カスタマイズに必要な設定
下記を2.「slick」の基本設定の「■HTMLhead部分」より下に追記します。
■HTMLhead部分
<script>
$(function() {
/* ==============
変数の定義
============== */
var thumbnum = 0; //メインスライダーのスライド番号
var thumbslidenum = 0; //サムネイルスライダーのスライド番号
var thumbnailItem = ".slider_thumb .slide_block"; //サムネイルスライダーの要素を変数に格納
/* ==============
サムネイルスライダーのスライド1枚目にある、1個目の要素を選択状態にする
============== */
$(thumbslider).find(".slide:first-child .slide_block:first-child").addClass("thumbnail-current");
/* ==============
サムネイルスライダーのスライド内にある各要素に、スライド番号を与える
============== */
$(thumbnailItem).each(function(){
var index = $(thumbnailItem).index(this); //サムネイルスライダーのスライド内にある要素が、何番目にあるか取得する
$(this).attr("data-index",index); //取得した数字をスライド番号として与える
});
/* ==============
サムネイルスライダーのスライド内にある要素をクリックしたとき、メインスライダーを切り替える
============== */
$(thumbnailItem).on('click',function(){
var index = $(this).attr("data-index"); //サムネイルスライダーのスライド内にある要素のスライド番号を取得
$(slider).slick("slickGoTo",index,false); //取得した番号と同じ位置へ、メインスライダーを切り替える
});
/* ==============
メインスライダーが切り替わるとき、サムネイルスライダーも切り替える
============== */
$(slider).on('beforeChange',function(event,slick,currentSlide,nextSlide){
//選択状態切り替え
$(thumbnailItem).each(function(){
$(this).removeClass("thumbnail-current"); //選択状態を外す
});
$(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current"); //選択状態にする
//サムネイルスライダーの切り替え
thumbslidenum = Math.floor( nextSlide / 4 ); //切り替えたスライドのスライド番号を取得し、「4※」で割る
$(thumbslider).slick('slickGoTo', thumbslidenum, false); //上記で出た番号と同じ位置へ、サムネイルスライダーを切り替える
});
});
</script>※下記の「4」とは、サムネイルスライダー内にある要素の数と等しいです。
3枚の時は「3」、5枚のときは「5」など、要件に合わせて変更してください。
thumbslidenum = Math.floor( nextSlide / 4 );
今回は「4」で割り、「Math.floor」で小数点以下を切り捨てることで、
1枚目～4枚目をまとめて1枚目のスライド、5枚目～8枚目をまとめて2枚目のスライドとして見立てています。
カスタマイズ方法は調べればいくつも出てきますが、コピー＆ペーストするだけでなく
処理内容を理解することで、より細かい動作を実装できるようになります。
まずは求められている要件を整理し、必要な動作を細分化して実装してみましょう。
以上、クリエイターブログでした。
