レスポンシブ対応のカルーセルスライダー「slick」＠jQuery

レスポンシブWebデザインに対応したカルーセルスライダーを実現するjQueryプラグイン「slick」です。

配布元

kenwheeler.github.io

納品案件でも一度使いましたが、かなり使い勝手が良いです。

とくにブレイクポイントを指定して一度に表示するスライドの枚数やスクロールする単位（一度のスクロールで一枚ずつスライドだったり、二枚ずつだったりを指定）を指定できるのはとても便利だと思います。

他にも特徴をあげると以下になります。

レスポンシブ対応
幅にブレイクポイントを指定し、スライドの表示数、スクロール数を変更できる
タッチデバイス対応
IE8以上で動作
カルーセルは縦、横に対応
画像の読み込み遅延が可能
MITライセンス

デモはこちら
DEMO

詳しくは配布元サイトを確認するのがいいです。紹介しきれないくらいオプション等、解説がありますので。

デモのソースはこちらになります。

必要なslickのファイルとjQuery本体を読み込み

<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>

スライド（カルーセル）のhtml

<ul class="slider">
    <li><img src="img/sample0.jpg"></li>
    <li><img src="img/sample1.jpg"></li>
    <li><img src="img/sample2.jpg"></li>
    <li><img src="img/sample3.jpg"></li>
    <li><img src="img/sample4.jpg"></li>
    <li><img src="img/sample5.jpg"></li>
</ul>

slickを動作させる記述（オプション含む）

<script>
    $(function(){
        $('.slider').slick({
            infinite: true, // 画像遅延読み込み
            autoplay: true, // 自動再生
            autoplaySpeed: 6000, // スライドが動くスピード（ミリ秒）
            dots: true, // カルーセル下のドット（現在の表示箇所を視覚化）
            // centerMode: true, //要素を中央寄せ
            // centerPadding:'100px', //両サイドの見えている部分のサイズ
            slidesToShow:4, // 一度に見えているスライドの数
            slidesToScroll:2, // スライドが切り替わる際の画像数
            responsive: [ // ブレイクポイントごとに設定を変更
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        fade: true, // fadeの有無（trueにすると一枚だけの表示になる）
                        speed: 500, // fade時の切り替えのスピード
                        cssEase: 'linear', // easing効果を指定
                        // centerMode: false, //要素を中央寄せ
                    }
                }
            ]
        });
    });
</script>

デモ画面で確認できますが、画面サイズが1024px以上では一度に4枚の画像を表示し、スライドが切り替わる際には2枚ずつ移動します。これがデフォルトの挙動で

それ以外に「responsive」というオプション設定を指定してブレイクポイントを設定し

600px以上、1024px未満では
3枚ずつ、1枚ずつの移動

480px以上、600px未満では
2枚ずつ、1枚ずつの移動

479px以下では1枚ずつで切り替え時にフェード効果を加えています。（フェード効果は一度に複数枚表示する場合に有効にすると表示する画像が1枚だけになります）

画面幅によってより細かく、有効な見せ方をするにはとても便利でありがたいですね。

ドットやスライドを手動で移動する際の矢印なんかはデザインテーマCSS（slick-theme.css）で定義されています。こちらを編集するか、独自のCSSファイルを用意して上書きして調整します。

CSS（デモで使用している）

ul{
    /* default styleをリセット */
    list-style:none;
    padding:0;
}

.slider img{ /* レスポンシブ対応 */
     width:100%; /* fallback */
     max-width:100% !important;
     height:auto !important;
}

/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before{
    color: #000;
}

/*左右の矢印の位置を変える*/
/* 内側に移動しないとスマホサイズではみでる */
/* もしくはmedia queryでスマホサイズではoverflow:hiddenを指定するか */
.slick-next {
    right:15px;
    z-index:100;
}
.slick-prev {
    left:15px;
    z-index:100;
}

/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color:#000;
}