BLOG【slick.js】サムネイル連動スライダー作ってみた※IE注意【サムネは固定】

だりあ
  1. HOME
  2. ブログ
  3. フロントエンド
  4. 【slick.js】サムネイル連動スライダー作ってみた※IE注意【サムネは固定】

こんにちわ、こんばんわ。だりあ(https://twitter.com/engineer_dahlia)です。

今日の記事はスライダーを作ることのできる『slick.js』についてです。

slick.jsを使ってサムネイル連動のスライダー作るよ。
公式のリファレンス見てみると『Slider Syncing』が似ているけど・・・
サムネイルは固定が良いんだよね。スライドしないやつ。

調べてみるとやり方はいくつかありそうですが、今回はhtmlもjsファイルもシンプルに書ける方法を1つご紹介します。

【動作確認】
Mac Book Pro:Chrome、Firefox、Safari
Windows:Chrome、Firefox、Edge、IE11(くせ者…)

目次

  1. 【slick.js】サムネイル連動スライダー作ってみた【サムネは固定】
    1. 注1) 同じページ内に複数のスライダーがある場合を想定
    2. 注2) IE11でバグったので違う書き方に変更
  2. 【解説】slickのオプション customPaging を使ってページネーションをサムネイルにカスタマイズ
    1. IEではシングルクォーテーションとダブルクオーテーションが混在してパスがバグるのでエスケープする
  3. まとめ|ページネーションを画像にしちゃうのは案外思いつかなかった

【slick.js】サムネイル連動スライダー作ってみた【サムネは固定】

まずは完成形をば。
※ページ内に複数のスライダーを設置したい時を想定して、2つ作っています。

slick サムネイル連動スライダー(サムネ固定)
<!-- 左のスライダー -->
<div class="nav-slides-wrap">
    <div class="nav-slides">
        <div class="nav-slides__item" style="background-image: url(/img/slick/slick01.jpg);"></li>
        <div class="nav-slides__item" style="background-image: url(/img/slick/slick02.jpg);"></li>
        <div class="nav-slides__item" style="background-image: url(/img/slick/slick03.jpg);"></li>
        <div class="nav-slides__item" style="background-image: url(/img/slick/slick04.jpg);"></li>
    </div>
    <!-- [/nav-slides] -->
</div>
<!-- [/nav-slides-wrap] -->

<!-- 右のスライダー -->
<div class="nav-slides-wrap">
    <div class="nav-slides">
        <div class="nav-slides__item" style="background-image: url(/img/slick/slick01.jpg);"></li>
        <div class="nav-slides__item" style="background-image: url(/img/slick/slick02.jpg);"></li>
        <div class="nav-slides__item" style="background-image: url(/img/slick/slick03.jpg);"></li>
        <div class="nav-slides__item" style="background-image: url(/img/slick/slick04.jpg);"></li>
    </div>
    <!-- [/nav-slides] -->
</div>
<!-- [/nav-slides-wrap] -->
.nav-slides-wrap {
    width: 600px;
    padding: 0 50px;
    margin: 0 auto;
}

.nav-slides__item {
    width: 540px;
    height: 0;
    padding-top: 22.2%;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}

.shop-figure .slick-dots {
    text-align: left;
    margin-top: 13px;
}

.shop-figure .slick-dots li {
    display: inline-block;
    -webkit-transition: opacity .6s;
    transition: opacity .6s;
}

.shop-figure .slick-dots li.slick-active {
    opacity: .6;
}

.shop-figure .slick-dots li:not(:first-child) {
    margin-left: 8px;
}

.shop-figure .slick-dots li p {
    width: 55px;
    height: 55px;
    cursor: pointer;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
$(function() {
    $('.nav-slides').each(function() { // ーーー注1
        $(this).slick({
            dots: true,
            arrows: false,
            fade: true,
            infinite: false,
            waitForAnimate: false,
            speed: 2000,
            customPaging: function(slider, i) {
                var thumbSrc = $(slider.$slides[i]).attr('style');
                // return '<p style="' + thumbSrc + '">'; ーーー注2
                return '<p style=\'' + thumbSrc + '\'>';
            }
        });
    });
});

注1) 同じページ内に複数のスライダーがある場合を想定

1つだけ設置するのなら、$(‘.nav-slides’).each(function() {} は挟まなくて大丈夫です。

しかし2つ以上設置する場合は、それぞれのスライダーが独立して動いてほしいのでこの処理を入れています。

注2) IE11でバグったので違う書き方に変更

コメントアウトしている、
return ‘<p style=”‘ + thumbSrc + ‘”>’; ですが、IEでの挙動がおかしかったのでその下の行のエスケープしたバージョンを採用しました。後述します。

【解説】slickのオプション customPaging を使ってページネーションをサムネイルにカスタマイズ

この実装をするに当たり、以下の記事を参考にさせていただきました。ありがとうございます。

参考:slickのページングにjQueryを使ってイメージを設定する方法

少々古い記事(2017年)なので、もしかしたらもっと良い方法があるかもしれません。「こんなやり方もあるよ!」って方はぜひ教えて下さい。

さて、本題です。

見出しの通り、slickオプションのcustomPagingを使って、ページネーションを画像にしてしまおう!という事です。

var thumbSrc = $(slider.$slides[i]).attr('style');

↑この部分、htmlに書いたメイン画像(.nav-slides__item)のstyle属性を取得しています。
.nav-slides__itemにはインラインでbackground-imageを書き込んでいます。
background-position, background-sizeはcssに書きます。

なんでインラインで書くの?」と思うかもしれませんが、
WordPressを始めCMSやその他JavaScriptなどを使って、コンテンツを動的に出力させる際にうまくできるからです(語彙力がない)

return '<p style=\'' + thumbSrc + '\'>';

↑そしてこれは、slickが自動で出力してくれるページネーションのliタグの中に、style属性にメイン画像と同じbackground-imageをいれたpタグを出力させています。

あとはcssで出力させたpタグのスタイルを整えればOK!
slickのその他のオプションや、widthやheight, marginやpaddingなどのスタイルは、要件に合わせて適宜変更してくださいね。

IEではシングルクォーテーションとダブルクオーテーションが混在してパスがバグるのでエスケープする

IE11でstyle属性がバグった!
// return '<p style="' + thumbSrc + '">'; ーーー注2

先述した↑こちらのコメントアウトについて。
始めはこの記述を書いて「実装完了〜〜☆」と思っていたら、IE11でバグってました。スクショの通り。

どうやらシングルクォーテーション( ‘ ‘ )とダブルクオーテーション( ” ” )が混在するので、IE君はいい感じに処理できなかったみたいです。

他のブラウザはOKだったので、IEのバグって事にしておきましょうかね。。。
ダブルクオーテーションをエスケープしてあげれば解決です。

return '<p style=\'' + thumbSrc + '\'>';

エスケープについての参考:https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings

まとめ|ページネーションを画像にしちゃうのは案外思いつかなかった

以上、サムネ固定のスライダー実装でした。

ページネーションって、小さい●のイメージしかなかったので、それをサムネにしちゃおうって考えは全然予想外でした。

でも言われてみれば『なるほど?』と納得。

コードもそれほど難しくないので、ぜひお試しあれ!それではっ!