レスポンシブ対応のスライダー『slick』が使いやすくておすすめ

今回は軽量で使い勝手のいいレスポンシブ対応スライダー『slick』について解説していきます。

レスポンシブ対応のスライダーは他にも有りますが、slickはブレイクポイントが設定可能な他、マウスドラッグでスワイプにも対応しているなど非常に使い勝手の良いスライダーだと思います。

それではファイルのダウンロードから順番に説明していきます。

必要なファイルを準備する

slickはこちらの配布サイトからファイルをダウンロードすることができます。

ファイルをダウンロードすると中に色々ファイルが入っているかと思います。その中から今回必要なファイルを以下にまとめました。

slick

├ ajax-loader.gif
├ fonts
├ slick-theme.css
├ slick.css
└ slick.min.js

必要なファイルはすべて『 slick』に入っています。

早速、これらを使ってサイトにスライダーを表示させて行きましょう！

HTMLを記述

HTML

<head>
・
・
中略
・
・
<link rel="stylesheet" type="text/css" href="css/slick.css" />
<link rel="stylesheet" type="text/css" href="css/slick-theme.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> //jQueryファイル
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/func_slick.js"></script> //スライダーのオプション記述用のjsファイル
</head>

<body>

<!--スライダーの記述-->
<ul class="slider"> <!--classは任意の名前でOK-->
  <li><img src="images/test01.jpg"></li>
  <li><img src="images/test02.jpg"></li>
  <li><img src="images/test03.jpg"></li>
  <li><img src="images/test04.jpg"></li>
</div>
<!--スライダーの記述ここまで-->

</body>

HTMLの記述はこんな感じです。先ほどのファイルを読み込む記述をhead内に、スライダーを表示するための記述をbodyにしています。

headに記述している『func_slick.js』はスライダーのオプション記述用のjsファイルです。ファイル名は任意ですので、別の名前を付けても構いません。中身については次項で書いていきます。

スライダーを実行する部分の指定と、アイコンフォントの置き場所の指定。

次にどの部分にスライダーの処理をするのかをJSファイルで指定します。今回は『func_slick.js』という名前のファイルを用意しました。

func_slick.js

$(function() {
    $('.slider').slick(); //スライダーにする部分のclassまたはidを指定
});

続いて、アイコンフォントの位置を再設定します。slickのコントローラーはアイコンフォントを使用しているので、アイコンフォントを正しく読み込めていないと普通の矢印に見えてしまいます。

アイコンフォントの位置は『slick-theme.css』で指定されているので、こちらを見てみましょう。

slick-theme.css

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat; /* urlを対応する場所に変更 */
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot'); /* urlを対応する場所に変更 */
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); /* urlを対応する場所に変更 */
}

一番最初に記述がありますね！これを皆さんの場合に置き換えて指定し直してください。

正しく指定できていると、コントローラーが矢印からアイコンに変わっています。

単純にスライダーを動かすだけならこの記述のみでOKです！

デモ1

このままでも使えるのですが、『slick-theme.css』の中身を少しいじって、スタイルを変えてみます。

スタイルを調整する

使用する環境に合わせて『slick-theme.css』を調整していきます。

途中に『/* Arrows */』と記述されている箇所があり、そこを書き換えることでコントローラーのスタイルを変更できます。

初期設定のままではコントローラーが白色で背景に同化していたり、少しサイズが小さかったりするので、少しいじってみます。

slick-theme.css

省略
・
・
・
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px; /* コントローラーの大きさと同じにする */
    height: 20px; /* コントローラーの大きさと同じにする */
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
・
中略
・
.slick-prev:before,
.slick-next:before
{
  font-family: 'slick';
  font-size: 20px; /* コントローラーの大きさ */
  line-height: 1;

  opacity: .75;
  color: white; /* コントローラーの色を指定（初期値がwhiteで背景が白だと隠れてしまうので注意！） */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
    left: -25px; /* 前へ戻るコントローラーの位置を指定 */
}
・
中略
・
.slick-next
{
    right: -25px; /* 次へ進むコントローラーの位置を指定 */
}

これでコントローラーのスタイルを変更できました！

デモ2

slickはここから、さらに色々なカスラマイズを加えることができます。

ほんの一例ですが、実際にオプションを指定して、少しカスタマイズしていきたいと思います。

スライダーのオプションを設定する

『func_slick.js』にオプションを指定していきます。
オプション一覧はこちらの記事に書いているので、そちらも参考にしてみてください！

先ほど作ったのがこれでした。

func_slick.js

$(function() {
    $('.slider').slick(); //スライダーにする部分のclassまたはidを指定
});

これに少し手を加えてみます。こんな感じにしてみました。

func_slick.js

$(function() {
  $('.slider').slick({
    dots:true, //ページャーを表示（スライダー下の黒い丸）
    centerMode: true, //要素を中央寄せにする
    centerPadding:'200px', //両サイドの見えている部分のサイズ
    autoplay:true, //自動で画像を切り替える
    autoplaySpeed:8000, //自動で画像が切り替えられるまでの時間 1000 = 1秒
    
    //レスポンシブでの動作を指定
    responsive: [{
      breakpoint: 640,  //ブレイクポイントを指定
      settings: {
        centerPadding:'50px',
      },{
      breakpoint: 480,
      settings: {
        centerMode: false,
      }
    }]
  });
});

続いて『slick-theme.css』も少しいじっていきます。

slick-theme.css

省略
・
・
・
/* Dots */
・
・
中略
・
・
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px; /* ページャーの大きさ */
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

『/* Dots */』というグループの中にページャーに関する記述があります。

ページャーは元々黒色なので、今回いじったのは大きさだけです。

こんな感じのスライダーが完成しました！

デモ3

今回使用したオプション以外にも様々なオプションが用意されていますので、配布サイトのデモなども参考にしてみてください！