slickでレスポンシブ対応のカルーセルを設置してみた

概要

レスポンシブ対応のカルーセルを作りたいならおすすめはjQueryプラグインのslickです。
デザインと機能のカスタマイズ性も高いのでとても使いやすいです。
その設置方法から簡単なカスタマイズまで記載します。

設置作業

まずは以下のサイト（slick公式）よりダウンロード
※2019/02/08時点での最新版は1.8.1
slick - the last carousel you'll ever need

最低限の機能を使いたいのであれば
slick.min.js slick.css slick-theme.cssのみ設置で大丈夫です。

僕の場合はCSSファイルはheadタグ内に、JSファイルはbodyタグの下に設置しました。
※jQueryの読み込みも忘れずに　　

headの中

<link rel="stylesheet" type="text/css" href="css/plugin/slick.css">
<link rel="stylesheet" type="text/css" href="css/plugin/slick-theme.css">

bodyの中

<script src="js/plugin/jquery-2.1.4.min.js"></script>
<script src="js/plugin/slick.min.js"></script>

slickの基本な使い方

HTML

<div class="slick-wrp">
  <div class="slick-box">
    <div class="slick-imgWrp">
      <img class="slick-img" src="/img/img_slide_01_dummy.png" alt="" />
    </div>
    <h3 class="slick-ttl">カルーセル見出し０１</h3>
    <p class="slick-txt">カルーセルテキスト０１カルーセルテキスト０１カルーセルテキスト０１</p>
  </div>
  <div class="slick-box">
    <div class="slick-imgWrp">
      <img class="slick-img" src="/img/img_slide_01_dummy.png" alt="" />
    </div>
    <h3 class="slick-ttl">カルーセル見出し０２</h3>
    <p class="slick-txt">カルーセルテキスト０２カルーセルテキスト０２カルーセルテキスト０２</p>
  </div>
</div>

今回は画像の下にテキストを入れ込むパターンで組んでみました。 .slick-box一つ一つがスライドになります。

JavaScript

$(function(){
    $('.slick-wrp').slick(); 
});

これだけで基本スライドは実装できます。
必ずjqueryとslick.min.jsを読み込んだ後に記述しましょう。

Result

しっかり表示されましたね。 prev と next のアイコンはdefaultで表示されるのですが白なので背景が白だと一瞬おや？と思うかもしれません。
背景色を代えてやるとしっかり表示されるのが確認できます。

slickのオプションを使ってみる

slickは色々なオプションがついています。

オートプレイ

javaScript

$('.slick-wrp').slick({
    autoplay:true, //オートプレイ機能ON
    autoplaySpeed:5000  //オートプレイ時のスピードを指定
}); 

インジケーターを表示

$('.slick-wrp').slick({
    dots:true  //インジケーターを表示
}); 

prev、nextボタンの非表示

$('.slick-wrp').slick({
    arrows: false //prev、nextボタンの非表示
}); 

dotsのカスタマイズ

インジケーターもdefaultのものも簡単にカスタマイズ出来るようにオプションが用意されています。 dotsで指定するclassを指定のものに変更できるというものです。

$('.slick-wrp').slick({
         dots: true, //dotsを有効化
    dotsClass: 'slide-dots'    //dotsのクラスを任意のものに変更
}); 

そこで基本のdotsのコードを見ていきましょう。
dotsオプションを指定すると以下のようなコードが自動生成されます。

<ul class="slick-dots" style="display: block;" role="tablist">
    <li class="" role="presentation">
        <button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 2" tabindex="-1">1</button>
    </li>
    <li role="presentation" class="slick-active">
        <button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 2" tabindex="0" aria-selected="true">2</button>
    </li>
</ul>

この.slick-dotsが.slide-dotsになったと考えてCSSを当てていきましょう

.slide-dots{
    text-align: center;
}

.slide-dots li{
    display: inline-block;
    width: 30px;
    margin: 0 15px;
}

.slide-dots li button{
    position: relative;
    width: 100%;
    text-indent: -9999px;
    border: none;
}

.slide-dots li button:before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    content: '';
    text-indent: 0;
    background-image: url(/img/icon_carousel_on.svg);
    background-repeat: no-repeat;
}

今後、オプションについてもっとまとめていきますがひとまずここまでとします。

190226追加｜レスポンシブで文字が大きくなる

slickを使ってテキストありのスライダーを表示すると、スマホを縦向き (Portrate mode) と横向き (Landscape mode)にしたりしてると、文字が大きくなってしまう現象が起きました。

対応方法

以下のCSSを当ててあげるだけで回避できました。

css

body {
    -webkit-text-size-adjust: 100%;
}

原因

原因ですが、スライダーのように要素が横に並んで幅が広くなってしまう場合、-webkit-text-size-adjust: 100%;を設定していないとiOSが自動でフォントサイズを調整してしまうようでした。