時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

【slick】2つのスライダーを連動させる方法【サムネイル付き】

記事内に広告を含みます

パソ君
パソ君

・slickで2つのスライダーを連動させる方法は？

こんな疑問にお答えします。

２つのスライダーが連動しているものをよく見ますよね。

サムネイル画像っぽい感じで。

あれ実は簡単に実装できちゃいます。

ジト
ジト

すぐにできるよ！

ということで、この記事では「2つのスライダーを連動させる方法」について解説していきます！

この記事でわかること

2つのスライダーを連動させる方法

【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【slick】2つのスライダーを連動させる方法【サムネイル付き】

そんな2つのスライダーを連動させたサンプルがこちらになります↓

See the Pen slick2つのスライダーを連動➀ by jito-coder (@jito-coder) on CodePen.

上と下のスライダーが同じように連動していますよね。

コードがこちら↓

<!-- 1つ目のスライダー -->
<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>
<!-- 2つ目のスライダー -->
<div class="test-slick2">
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>
// 1つ目のスライダー
$(function () {
    $(".test-slick").slick({
        autoplay: true, 
        arrows: false, 
        asNavFor: ".test-slick2",
    });
});

// 2つ目のスライダー
$(function () {
    $(".test-slick2").slick({
        slidesToShow: 3,
        asNavFor: ".test-slick",
        focusOnSelect: true,
    });
});

コードの重要な点がこちら↓

  1. 2つのスライダー用のHTMLを作成
  2. 2つのスライダーを連動させるjQueryコードを記述

順に見ていきましょう。

➀：2つのスライダー用のHTMLを作成

まず連動させるスライダー用HTMLを作成します。

<!-- 1つ目のスライダー -->
<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>

<!-- 2つ目のスライダー -->
<div class="test-slick2">
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>

➁：2つのスライダーを連動させるjQueryコードを記述

続いて2つそれぞれに対してのjQueryのコードを記述します。

// 1つ目のスライダー
$(function () {
    $(".test-slick").slick({
        autoplay: true, 
        arrows: false, 
        asNavFor: ".test-slick2",
    });
});
// 2つ目のスライダー
$(function () {
    $(".test-slick2").slick({
        slidesToShow: 3,
        asNavFor: ".test-slick",
        focusOnSelect: true, //サムネクリックで動くようになる
    });
});

この「asNavFor」が重要なポイントです。

「asNavFor」の値に、連動させたいスライダーのクラス名を記述しましょう。

これが連動させるためのものとなります。

ようは2つスライダー作成して、asNavForでそれぞれのスライダーを指定すれば連動することができる。って感じです。

簡単ですよね。

【slick】2つのスライダーを連動させる方法【サムネイルを固定】

サムネイル部分は固定して表示させたい場合もありますよね。

そんな場合は下記のようにします↓

See the Pen slick2つのスライダーを連動➀ by jito-coder (@jito-coder) on CodePen. 

<!-- 1つ目のスライダー -->
<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
</div>
<!-- 2つ目のスライダー -->
<div class="test-slick2">
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
</div>
.test-slick2 .slick-track {
    transform: unset !important;
}

先ほどと変えてやったことは下記ですね。

  1. 表示サムネイル数とimgタグの数を同じにする
  2. 「transform: unset !important;」を使い、サムネイルが左右に動かないようにする

これだけでサムネイルを固定させて表示できます。

ちなみに左右を透過させてる方法はこちらの記事をどうぞ↓

【解説】slickで左右の画像を「透過・小さく」させる方法

サムネイルの行数を変える

ちなみにサムネイルの行数を複数にすることも可能です。

See the Pen slick2つのスライダーを連動➁ by jito-coder (@jito-coder) on CodePen. 

<!-- 1つ目のスライダー -->
<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>
<!-- 2つ目のスライダー -->
<div class="test-slick2">
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick2__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>
.test-slick2__item {
    width: calc(100% / 4) !important;
}
$(function () {
    $(".test-slick2").slick({
        slidesToShow: 8,
        arrows: false, 
        asNavFor: ".test-slick",
        focusOnSelect: true, //これをtrueにするとサムネクリックで動くように
    });
});
  1. サムネ表示数（slidesToShow）とimgタグを任意に増やす。同じ数で。
    ※今回は8枚にしました。
  2. スライダー子要素に対して「width: calc(100% / n) !important;」を指定。
    n部分に任意の数を入れる。
    ※今回は4にしました。つまり8÷4で2行になります。

【slick】2つのスライダーを連動させる方法【サムネイル付き】：まとめ

  • 2つのスライダーをasNavForを使って連動
  • サムネイル数を変えれば固定も可能。複数行にもできる
ジト
ジト

2つのスライダーを連動させたい場合試してみてね！

【解説】slickのオプション一覧【カスタマイズまとめ】 【最新】slickのスライダー実装サンプル25選【コピペOK】

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

【解説】slickで左右の画像を「透過・小さく」させる方法

次の記事

【解決】slickでスライダー要素の高さを揃える方法【裏ワザ】