【jQuery】slickでサムネイル付きのスライダーを作る

メイン画像の下にサムネイル画像があり、サムネイルをクリックするとメイン画像も切り替わるスライダーです。

サムネイルは左右に動かす事ができ、自動ループにもなっていて、一番左の画像がメイン画像に表示される仕組みです。

⇒デモページはこちら

まずは公式サイトからファイルをダウンロードします。

⇒slick公式サイト

必要なファイルは下記になります。

・fontsフォルダ

・ajax-loader.gif

・slick.css

・slick-theme.css

・slick.min.js

◆HTML

外部ファイルの読み込みは下記のように。

<link rel="stylesheet" type="text/css" href="slick.css">
<link rel="stylesheet" type="text/css" href="slick-theme.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="slick.min.js"></script>

コンテンツ部分は下記のように。
最初の「ul」がメイン画像でその後の「ul」がサムネイルになります。

<ul class="slider thumb-item">
<li><a href="#"><img src="img/001.jpg" alt=""></a></li>
<li><a href="#"><img src="img/002.jpg" alt=""></a></li>
<li><a href="#"><img src="img/003.jpg" alt=""></a></li>
<li><a href="#"><img src="img/004.jpg" alt=""></a></li>
<li><a href="#"><img src="img/005.jpg" alt=""></a></li>
<li><a href="#"><img src="img/006.jpg" alt=""></a></li>
<li><a href="#"><img src="img/007.jpg" alt=""></a></li>
</ul>

<ul class="slider thumb-item-nav">
<li><img src="img/001.jpg" alt=""></li>
<li><img src="img/002.jpg" alt=""></li>
<li><img src="img/003.jpg" alt=""></li>
<li><img src="img/004.jpg" alt=""></li>
<li><img src="img/005.jpg" alt=""></li>
<li><img src="img/006.jpg" alt=""></li>
<li><img src="img/007.jpg" alt=""></li>
</ul>

◆オプションなど

スライドスピードやサムネイルに表示する枚数、スライドで動かす枚数など設定できます。

<script>
$(function() {
$('.thumb-item').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.thumb-item-nav'
});
$('.thumb-item-nav').slick({
accessibility: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 400,
arrows: true,
infinite: true,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.thumb-item',
focusOnSelect: true,
});
});
</script>

トップページだけでなく、色々な場面でも使えそうです。