【slick】スライド枚数の異なるスライダー同士の連携

こんにちは、ウェブラボクリエイターズメモです。

以前のクリエイターズメモでスライダーを実装できるjQueryプラグイン「slick」をご紹介しました。

このプラグインは用意されているオプションを設定するだけで実装も可能ですが、もう一歩踏み込んだカスタマイズをすれば、表現の幅がさらに拡がるでしょう。
そこで今回は、スライド枚数が異なるスライダー同士を連携させるカスタマイズをご紹介します。

まずはDEMOをご覧になり、操作感をご確認ください。
→DEMO

メインのスライダーと、サムネイルのスライダーの動作を連携させたカスタマイズとなっております。
 

要件

今回作成したスライダーカスタマイズの要件は下記になります。

①メインは1枚、サムネイルは4枚表示させる

②メインが「4枚目から5枚目」と「5枚目から4枚目」に切り替わるとき、
サムネイルのスライダーも切り替える

③サムネイルをクリックすると、メインも対応したに切り替える

②の要件を満たすには、下記の各スライダーのスライド枚数は下記になります。

• メインのスライダー：スライド枚数が8枚
• サムネイルのスライダー：スライド枚数が2枚、各スライドに要素が4個ずつ

実装方法

1.プラグインのダウンロード

まず公式サイトからプラグインをダウンロードします。

→「slick」公式サイト

基本的な設定については、以前のクリエイターズメモもご参照ください。

2.「slick」の基本設定

まず、スクリプトの読込、スライダー定義などの基本設定を行います。

■HTMLhead部分

■HTMLスライダー部分

3.カスタマイズに必要な設定

下記を2.「slick」の基本設定の「■HTMLhead部分」より下に追記します。
■HTMLhead部分

※下記の「4」とは、サムネイルスライダー内にある要素の数と等しいです。
3枚の時は「3」、5枚のときは「5」など、要件に合わせて変更してください。

今回は「4」で割り、「Math.floor」で小数点以下を切り捨てることで、
1枚目～4枚目をまとめて1枚目のスライド、5枚目～8枚目をまとめて2枚目のスライドとして見立てています。

カスタマイズ方法は調べればいくつも出てきますが、コピー＆ペーストするだけでなく
処理内容を理解することで、より細かい動作を実装できるようになります。
まずは求められている要件を整理し、必要な動作を細分化して実装してみましょう。

以上、クリエイターブログでした。