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

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

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

160127

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

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

【DEMO】

今回は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>

スライダーのメイン部分を.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
                }
            }
        ]
    });
});

メイン.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;
    }
}

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

メディアクエリで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】


「レスポンシブWebデザインに対応!Slick.jsを使ってスライドの サムネイルの位置を切り替える」への3件のフィードバック

  1. はじめまして、この記事で書かれていることが実現したい内容にピッタリでしたので使用させて頂きました。
    ですが、試しにコードをコピペしてみたところ矢印が両方とも左に寄ってしまいました。prevボタンはright:0で右端にくるはずなのに、左端よりも外に出てしまってブラウザを縮めると表示されません。

    考えつく限り触ってみましたがまったく解消されません。
    原因が何かお分かりでしたら教えて頂けませんでしょうか。
    締切が明日なのでかなり急いでいます。
    お手数をおかけしますが、何卒よろしくお願いいたします。

    1. さきほどコメントさせて頂いた者です。
      別のやり方で問題解決できました、お騒がせしてしまい
      申し訳ありません。

      1. > 山下 まりえ様

        ご覧いただきありがとうございます。
        お急ぎのところ返信が遅くなり申し訳ありません。

        こちらでも再現してみましたが、もしかするとslick-theme.cssを読み込んでおられないでしょうか?
        こちらの中に

        .slick-prev {
            left: -25px;
        }

        の記述がありますので、それと競合するようです。
        もし上書きするのであれば、

        .slider .slider-nav-wrap .slick-arrow.slick-prev{
            left: auto;  
            right: 0;        
        }
        @media (min-width: 768px){
            .slider .slider-nav-wrap .slick-arrow.slick-prev{
                right: auto;
                left: 50%;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);   
            }
        }

        このような感じでいかがでしょうか?
        (微調整が必要かもしれません。)

        slick-theme.cssがslickのデザインのデフォルトテーマでしたので、私がDEMO作るときには読み込まず作っていました。
        一文入れるべきでしたね、すいません。お手数をおかけしてしまいました。。。。
        ご指摘ありがとうございます!!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です