slick サムネイル付きスライダーを作る 連動/固定

jQueryプラグイン「slick」を使用して、サムネイルをクリックした時にメインスライドが連動して動く「サムネイル付きのスライド」の作り方を紹介します。

今回は、サムネイルが縦に並ぶ縦型とサムネイルが横に並ぶ横型、サムネイルを動かさずに固定させる固定型を用意しました。

目次

前提

デモでは下記のCSSとJavascriptファイルを読み込んでいます。

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

<!-- Javasript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

サムネイル連動 縦型

See the Pen
jQuery slick – vertical slide by kura (@kuranopen)
on CodePen.

スライダーがサムネイルスライダーと連動。サムネイルスライダーが縦にスライドするサムネイル連動 縦型スライダー。

仕様

  • 縦スライド
  • レスポンシブ対応
  • リンクタグ挿入可
  • 画像高さ均一

HTML

<div class="slide-box">
  <ul class="slide">
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/301/1024/768" alt=""/></a>
    </li>
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/302/1024/768" alt=""/></a>
    </li>
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/309/1024/768" alt=""/></a>
    </li>
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/304/1024/768" alt=""/></a>
    </li>
    <li class="item">
      <a href="#"><img src="https://picsum.photos/id/305/1024/768" alt=""/></a>
    </li>
  </ul>
  <div class="slide-navigation">
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/301/1024/768" />
      </figure>
    </div>
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/302/1024/768" />
      </figure>
    </div>
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/309/1024/768" />
      </figure>
    </div>
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/304/1024/768" />
      </figure>
    </div>
    <div class="item">
      <figure class="image">
        <img src="https://picsum.photos/id/305/1024/768" />
      </figure>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

/* slide-box */

.slide-box {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* slide */

.slide {
  position: relative;
  width: 65%;
  margin: 0;
  padding: 0;
}
.slide .item {
  position: relative;
  height: 100%;
}
.slide .item a {
  display: block;
}
.slide .item::before {
  display: block;
  padding-top: 39%;
  content: "";
}
.slide .item .image {
  position: relative;
  overflow: hidden;
}
.slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .slide {
    width: 100%;
  }
}

/* slide-navigation */

.slide-navigation {
  line-height: 0;
  position: relative;
  width: 35%;
  margin: 0;
  padding: 0;
}
.slide-navigation .item {
  position: relative;
  cursor: pointer;
}
.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.slide-navigation .item .image::before {
  display: block;
  padding-top: 25%;
  content: "";
}
.slide-navigation .item .image::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.5;
  background: #000;
}
.slide-navigation .slick-current .image::after {
  opacity: 0;
}
.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
}
.slide-navigation .item .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .slide-navigation {
    width: 100%;
  }
  .slide-navigation .item .image::before {
    padding-top: 50%;
  }
}

/* slick */

.slick-vertical .slick-slide {
  border: 0 solid transparent;
}
.slick-arrow {
  z-index: 999;
}
.slick-prev {
  top: 25px;
  bottom: auto;
  left: 0;
  right: 0;
  margin: auto;
}
.slick-prev:before {
  content: "↑";
}
.slick-next {
  top: auto;
  bottom: 5px;
  left: 0;
  right: 0;
  margin: auto;
}
.slick-next:before {
  content: "↓";
}

@media screen and (max-width: 767px) {
  .slick-prev {
    top: 20px;
    bottom: 0;
    right: auto;
    left: 20px;
  }
  .slick-prev:before {
    content: "←";
  }
  .slick-next {
    top: 20px;
    bottom: 0;
    right: 20px;
    left: auto;
  }
  .slick-next:before {
    content: "→";
  }
}

Javascript

$(function() {
  var slide_main = $(".slide").slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: ".slide-navigation"
  });
  var slide_sub = $(".slide-navigation").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4000,
    speed: 400,
    asNavFor: ".slide",
    focusOnSelect: true,
    vertical: true,
    verticalSwiping: true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          centerMode: true,
          vertical: false,
          verticalSwiping: false,
          slidesToShow: 3,
          adaptiveHeight: true
        }
      }
    ]
  });
  var open_window_Width = $(window).width();
  $(window).resize(function() {
    var width = $(window).width();
    if (open_window_Width != width) {
      slide_main.slick("setPosition");
      slide_sub.slick("setPosition");
    }
  });
});

サムネイル連動 横型

See the Pen
slick (horizontal) by kura (@kuranopen)
on CodePen.

スライダーがサムネイルスライダーと連動。サムネイルスライダーが横にスライドするサムネイル連動 縦型スライダー。

仕様

  • 横スライド
  • レスポンシブ対応
  • リンクタグ挿入可
  • 画像高さ均一

HTML

See the Pen
slick (horizontal) by kura (@kuranopen)
on CodePen.

CSS

See the Pen
slick (horizontal) by kura (@kuranopen)
on CodePen.

Javascript

See the Pen
slick (horizontal) by kura (@kuranopen)
on CodePen.

サムネイル連動させない固定型

See the Pen
jquery slick - thumbnail fixed by kura (@kuranopen)
on CodePen.

サムネイルはスライドせずに固定表示。サムネイルをクリックするとスライド画像が切り替わる固定型スライダー。

仕様

  • サムネイル固定
  • レスポンシブ対応
  • 画像高さ均一

HTML

<ul class="slide">
  <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
</ul>
<ul class="slide-navigation">
  <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
  <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
</ul>

CSS

/* slide */

.slide {
  position: relative;
  margin: 0;
  padding: 0;
}
.slide .item {
  position: relative;
  height: 100%;
}
.slide .item::before {
  display: block;
  padding-top: 39%;
  content: "";
  position: relative;
  overflow: hidden;
}
.slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

/* slide-navigation */

.slide-navigation {
  position: relative;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.slide-navigation .item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: 19%;
  height: 100%;
  margin: 0.5%;
  padding: 0;
}
.slide-navigation .item::before {
  display: block;
  padding-top: 70%;
  content: "";
}
.slide-navigation .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
.slide-navigation .current::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.5;
  background: #000;
}

Javscript

$(function() {  
  $slide = $('.slide');
  $navigation = $('.slide-navigation .item');
 
  $slide.slick({  //slickスライダー作成
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
  });  
  $navigation.each(function(index){ //サムネイルに連番付与属性
    $(this).attr('data-number', index);
  });
  $navigation.eq(0).addClass('current');  //1枚をオーバーレイ
  
  $navigation.on('click', function(){ //サムネイルクリック時イベント
    var number = $(this).attr('data-number');
    $slide.slick('slickGoTo', number, true);
    $(this).siblings().removeClass('current');
    $(this).addClass('current');
  });
});

slick タイプ別サンプル

デザインを本で学びたい人向けの記事

design_book

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選

関連記事

お得ニュース

apple_sale_210810

AmazonでApple Watchが5000円引き。ポイント3%付きのお得セール開催中
mousepc_210805_01

ゲーミングPCが5万円引き。マウスコンピューターのビッグサマーセール 第2弾が開催
  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note