レスポンシブWebデザインに対応！Slick.jsを使ってスライドのサムネイルの位置を切り替える

年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか？

さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。

みなさんはサイト制作するとき、メインに使うスライダーって決めてますか？僕の本命は bxSliderとslickです。この2本の使い分けって感じですねー

先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。

今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。

まずはslick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。

<script src="jquery.js"></script>
<script src="slick.min.js"></script>
<link rel="stylesheet" href="slick.css">

※追記

slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。
一応回避方法を考えてみましたのでコメントをご覧ください。

スライダー部分のHTMLはこんな感じに。

<div class="slider container">
    <div class="slider-for">
        <div class="sp-slide"><img src="images/01.png" alt=""></div>
        <div class="sp-slide"><img src="images/02.png" alt=""></div>
        <div class="sp-slide"><img src="images/03.png" alt=""></div>
        <div class="sp-slide"><img src="images/04.png" alt=""></div>
        <div class="sp-slide"><img src="images/05.png" alt=""></div>
        <div class="sp-slide"><img src="images/06.png" alt=""></div>
    </div>     
    <div class="slider-nav-wrap">
        <div class="slider-nav">
            <div class="sp-thumbnail"><img src="images/01.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/02.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/03.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/04.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/05.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/06.png" alt=""></div>
        </div>
        <div class="slick-nav-arrows">
            <div class="slick-next"></div>
            <div class="slick-prev"></div>
        </div>
    </div>
</div>

</div>

</div>

</div>

スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。

動作のためのJavascriptをこんな感じです。

$(document).ready(function(){
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        centerMode: true,
        focusOnSelect: true,
        vertical: true,
        arrows:  true,
        prevArrow: $('.slick-prev'),
        nextArrow: $('.slick-next'), 
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    centerMode: true,
                    vertical: false
                }
            }
        ]
    });
});

$(document).ready(function(){

$('.slider-for').slick({

slidesToShow: 1,

slidesToScroll: 1,

arrows: false,

fade: false,

asNavFor: '.slider-nav'

});

$('.slider-nav').slick({

slidesToShow: 4,

slidesToScroll: 1,

asNavFor: '.slider-for',

dots: false,

centerMode: true,

focusOnSelect: true,

vertical: true,

arrows: true,

prevArrow: $('.slick-prev'),

nextArrow: $('.slick-next'),

responsive: [

{

breakpoint: 768,

settings: {

centerMode: true,

vertical: false

}

]

});

メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。
メインである.slider-forのオプションで「asNavFor : ‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。

サムネイルの方は、今回は4枚並ぶ形にしました。「slidesToShow: 4」
「the last carousel 」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。

そしてslickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。

見た目の方のCSSはこんなです。

.slider{
    position: relative;
    max-width: 960px;
}
.slider img{
    max-width: 100%;
    height: auto;
}
.slider .slider-nav-wrap{
    position: relative;
}
.slider .slider-nav-wrap .slider-nav .slick-list{
    padding: 0 !important;
}
.slider .slider-nav-wrap .slider-nav .slick-track{
    left: 0 !important;
    width: 100%;
    opacity: 1;
}
.slider .slider-nav-wrap .slider-nav .slick-slide{
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    opacity: 1;
    padding: 5px;
}
.slider .slider-nav-wrap .slider-nav .slick-slide:hover{
    opacity: .5;
}
.slider .slider-nav-wrap .slick-arrow{
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.slider .slider-nav-wrap .slick-prev{
    right: 0;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #444444;
}
.slider .slider-nav-wrap .slick-next{
    left: 0;
    border-width: 6px 12px 6px 0;
    border-color: transparent #444444 transparent transparent;
}
@media (min-width: 768px){
    .slider .slider-for{
        float: left;
        width: 79.1666%;
    }
    .slider .slider-nav-wrap{
        position: absolute;
        top: 50%;
        right: 0;
        width: 16.6666%;
        padding: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .slider .slider-nav-wrap .slider-nav .slick-list{
        padding: 0 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-track{
        left: 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-slide{
        padding: 0;
    }
    .slider .slider-nav-wrap .slick-arrow{
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .slider .slider-nav-wrap .slick-prev{
        top: auto;
        bottom: -1.5em;
        border-width: 18px 9px 0 9px;
        border-color: #444444 transparent transparent transparent;
    }
    .slider .slider-nav-wrap .slick-next{
        top: -1.5em;
        border-width: 0 9px 18px 9px;
        border-color: transparent transparent #444444 transparent;
    }
}

.slider{

position: relative;

max-width: 960px;

}

.slider img{

max-width: 100%;

height: auto;

}

.slider .slider-nav-wrap{

position: relative;

}

.slider .slider-nav-wrap .slider-nav .slick-list{

padding: 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-track{

left: 0 !important;

width: 100%;

opacity: 1;

}

.slider .slider-nav-wrap .slider-nav .slick-slide{

-webkit-transition: opacity .3s ease;

transition: opacity .3s ease;

opacity: 1;

padding: 5px;

}

.slider .slider-nav-wrap .slider-nav .slick-slide:hover{

opacity: .5;

}

.slider .slider-nav-wrap .slick-arrow{

position: absolute;

top: 50%;

width: 0;

height: 0;

border-style: solid;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.slider .slider-nav-wrap .slick-prev{

right: 0;

border-width: 6px 0 6px 12px;

border-color: transparent transparent transparent #444444;

}

.slider .slider-nav-wrap .slick-next{

left: 0;

border-width: 6px 12px 6px 0;

border-color: transparent #444444 transparent transparent;

}

@media (min-width: 768px){

.slider .slider-for{

float: left;

width: 79.1666%;

}

.slider .slider-nav-wrap{

position: absolute;

top: 50%;

right: 0;

width: 16.6666%;

padding: 0;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.slider .slider-nav-wrap .slider-nav .slick-list{

padding: 0 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-track{

left: 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-slide{

padding: 0;

}

.slider .slider-nav-wrap .slick-arrow{

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.slider .slider-nav-wrap .slick-prev{

top: auto;

bottom: -1.5em;

border-width: 18px 9px 0 9px;

border-color: #444444 transparent transparent transparent;

}

.slider .slider-nav-wrap .slick-next{

top: -1.5em;

border-width: 0 9px 18px 9px;

border-color: transparent transparent #444444 transparent;

}

ちょっと長いですけど、基本的にはたいしたことしてないですね。

メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を％で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100％にしています)
.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)

スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。
DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。

今回はコードばかりでいつも以上にとっつきにくいですね。スイマセン・・・

追記(2016/04/25)

サンプルその2も作ってみました。よろしければこちらもどうぞ！

Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】