【slick】サムネイル連動のスライダーの作成方法

今回はslickを使ったサムネイルを連動させるスライダーの作り方を紹介します。

サムネイル連動スライダーの作り方

ファイル読み込み

まずslickスライダーに必要なcssとjsを読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

次はhtml、css、jsになります。

html

<div class="cont">
  <div class="slider">
    <div class="slick-img"><img src="img/slider01.jpg" alt=""></div>
    <div class="slick-img"><img src="img/slider02.jpg" alt=""></div>
    <div class="slick-img"><img src="img/slider03.jpg" alt=""></div>
    <div class="slick-img"><img src="img/slider04.jpg" alt=""></div>
  </div>
  <div class="thumb">
    <div class="thumbnail-img"><img src="img/slider01.jpg" alt=""></div>
    <div class="thumbnail-img"><img src="img/slider02.jpg" alt=""></div>
    <div class="thumbnail-img"><img src="img/slider03.jpg" alt=""></div>
    <div class="thumbnail-img"><img src="img/slider04.jpg" alt=""></div>
  </div>
</div>

css

.cont {
  margin: 50px auto 0;
  max-width: 100%;
  width: 100%;
}
img {
  height: auto;
  width: 100%;
}

js

$(function () {
  $(".slider").slick({
    autoplay: true,
    arrows: false,
    asNavFor: ".thumb",
  });
  $(".thumb").slick({
    slidesToShow: 3,
    asNavFor: ".slider",
    focusOnSelect: true,
  });
});

以上になります。

サンプル