Web制作 スライダー

【slick】メイン画像が連動するサムネイル付きスライダーの作り方

【slick】メイン画像が連動するサムネイル付きスライダーの作り方
slickでサムネイル付きのスライダーって作れない?
色々なタイプが作れるよ!

今回はslickを使ったサムネイル付きのスライダーをいくつかご紹介していきます。

slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

レスポンシブ対応のスライダープラグイン「slick」の使い方

【初めて使う人向け】jQuery本体を読み込む方法

またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

slickのカスタマイズ用オプション一覧をご紹介

効率よくコーディングしたい人はこちら

slickでメイン画像が連動するサムネイル付きスライダーの作り方

今回は3種類のスライダーを作っていきます。

 

サムネイルクリックでメインスライド変更

まずはサムネイルが3枚で、サムネイルをクリックするとメインの画像が切り替わるスライダーです。

See the Pen
slick(サムネイル:)
by junpei (@junpei-sugiyama)
on CodePen.

サムネイルのクリックと、サムネイル左右にある矢印をクリックでスライドが動きます。

メイン画像の左右にも矢印を表示させれば同じようにクリックでスライドを動かせますが、矢印が2つあるのは変なのでサムネイルの方にしか表示させていません。

 

コード解説

それではコードを見ていきます。

<div class="container">
  <div class="slider">
    <div class="slick-img">
      <img src="画像パス1" alt=""/>
    </div>
    <div class="slick-img">
      <img src="画像パス2" alt=""/>
    </div>
    <div class="slick-img">
      <img src="画像パス3" alt=""/>
    </div>
  </div>
  <div class="thumbnail">
    <div class="thumbnail-img">
      <img src="画像パス1" alt=""/>
    </div>
    <div class="thumbnail-img">
      <img src="画像パス2" alt=""/>
    </div>
    <div class="thumbnail-img">
      <img src="画像パス3" alt=""/>
    </div>
  </div>
</div>

コードが長くなるので上記のコードではメイン画像とサムネイル画像は3枚ずつになっていますが、実際はスライドの枚数だけ書きます。

見たら分かると思いますが、最初のclass"slider"がメイン画像のスライダーで、次のclass="thumbnail"がサムネイルのスライダーになります。

この2つは連動するので、画像パスは合わせましょう。

CSSは変わった所はないのでjQueryを見てみます。

$(function () {
  // メイン画像のオプション
  $(".slider").slick({
    autoplay: true, // 自動再生ON
    arrows: false, // 矢印非表示
    asNavFor: ".thumbnail", // サムネイルと同期
  });
  // サムネイルのオプション
  $(".thumbnail").slick({
    slidesToShow: 3, // サムネイルの表示数
    asNavFor: ".slider", // メイン画像と同期
    focusOnSelect: true, // サムネイルクリックを有効化
  });
});

説明は全てオプションの横に書きましたが、メイン画像とサムネイルの両方にあるのがasNavForになります。

これは同期したい対象のclass名を指定します。

ちなみにメイン画像はフェードにすることも可能です。

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

 

サムネイル固定

先ほどはサムネイルがスライドしましたが、今度はサムネイルを固定します。

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

 

コード解説

HTMLは先ほどと枚数が違うだけです。

サムネイルが固定なので、サムネイルは表示されてる数にしてメイン画像も同じ数にします。

そしてjQueryも先ほどと同じで、違うのは以下のコードをCSSに追加しただけです。

.thumbnail .slick-track {
  transform: unset !important;
}

これだけです。

こちらもメイン画像はスライドとフェードどちらでも出来ます。

またデモのように選択されていないサムネイルは透過させたい場合は以下のコードを追記すればOKです。

.thumbnail-img {
  opacity: .3;
  transition: opacity .3s linear;
}
.thumbnail .slick-current {
  opacity: 1;
}

 

サムネイル固定2行

今度は先ほどのサムネイル固定を少し変え、サムネイルを2行にしてみます。

See the Pen
slick(サムネイル固定:2列)
by junpei (@junpei-sugiyama)
on CodePen.

HTMLは先ほどの3枚から6枚に変わっただけで、jQueryもサムネイルの表示数を設定するslidesToShowが3から6に変わっただけです。

そして先ほどのサムネイル1行のスライダーからCSSで追加されたコードはこちらです。

.thumbnail-img {
  width: calc(100% / 3) !important;
}

これがないとslidesToShowは6なので1行6枚で表示されてしまいます。

ここで強制的に1枚の横幅を1/6から1/3にした事で1行は3枚となり、残りの3枚は次の行に移動しました。

以上になります。


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-Web制作, スライダー
-,