Posted: 2016.08.29 / Category: javascript / Tag: jQuery

slickはレスポンシブに対応した柔軟性の高いスライダーやカルーセルが作れるjQueryプラグインです。
今回はメインビジュアルで使用するようなカスタマイズ方法をご紹介します。

slickのダウンロードと準備

ダウンロードはGitHubから。
ここでは現時点の最新バージョンである、slick 1.6を使用します。

kenwheeler/slick

ダウンロードしたファイルの「slick.css」「slick-theme.css」「slick.min.js」を読み込みます。
slickではその他、アイコンフォントと「ajax-loader.gif」を画像としてCSSから読み込まれています。

html

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

簡単な使い方

HTMLの方はimgをリストで並べるだけです。

HTML

<ul id="slider">
    <li><img src="img/01.jpg"></li>
    <li><img src="img/02.jpg"></li>
    <li><img src="img/03.jpg"></li>
    <li><img src="img/04.jpg"></li>
</ul>
    

jQueryの指定はHTMLで指定したidに対してslickを実行するだけです。

JavaScript

<script type="text/javascript">
;(function($) {
    $(function() {
        $('#slider').slick();
    });
})(jQuery);
</script>
    

場合によってはCSSを追記します。
幅を指定してセンター配置する場合はこのようになります。

#slider {
    width: 800px;
    margin: 30px auto;
}
#slider img {
    width: 100%;
}
    

画面いっぱいに表示してレスポンシブ対応したスライダー

次は簡単なオプションを設定して、画像を画面いっぱいに表示してみましょう。

JavaScript

$('#slider').slick({
    autoplay: true,      // 自動で切り替える
    autoplaySpeed: 2000, // 待機する時間
    arrows: false,       // 次へ・戻るボタンを非表示
    dots: true           // 点のペジャーナビゲーション
});
    

CSSで幅を100%に変更します。

#slider {
    width: 100%;
    margin: 0 auto;
}
#slider img {
    width: 100%;
}
    

少しだけ前後の画像を表示させる

オプションでcenterModeを有効にするだけで前後の画像を少しだけ表示したりできます。

JavaScript

$('#slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    dots: true,
    centerMode: true,
    slidesToShow: 1,
    centerPadding: '200px'
});
    

ページナビゲーションをサムネイルにする

ドット表示だったページナビゲーションをサムネイルに変えてみます。
HTMLにナビゲーション部分のリストを追記しましょう。

<ul id="slider-nav">
    <li><img src="img/s01.jpg"></li>
    <li><img src="img/s02.jpg"></li>
    <li><img src="img/s03.jpg"></li>
    <li><img src="img/s04.jpg"></li>
</ul>
    

JSのオプションでは本体の方に「asNavFor」でナビゲーションを、ナビゲーションの方は「asNavFor」で本体を指定します。

JavaScript

$('#slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    asNavFor: '#slider-nav'
});
$('#slider-nav').slick({
    asNavFor: '#slider',
    slidesToShow: 4,
    focusOnSelect: true
});

ページナビゲーションにマウスオーバーで切り替える

デフォルトではナビゲーションをクリックすると切り替わるようになっています。
これをマウスオーバーで切り替え、クリックではリンクを設定して画面遷移という動作にしみます。

ナビゲーションにaタグを追記します。

<ul id="slider-nav">
    <li><a href="index.html"><img src="../img/01.jpg"></a></li>
    <li><a href="index.html"><img src="../img/02.jpg"></a></li>
    <li><a href="index.html"><img src="../img/03.jpg"></a></li>
    <li><a href="index.html"><img src="../img/04.jpg"></a></li>
</ul>
    

JSではマウスオーバーした時に制御するコードを追記します。

JavaScript

$('#slider-nav li').on('mouseover', function(e) {
    var $currTarget = $(e.currentTarget),
    index = $currTarget.data('slick-index'),
    slickObj = $('#slider').slick('getSlick');
    slickObj.slickGoTo(index, true);    // アニメーション中でも切り替える
    $slide.slick('slickPause');     // 自動切り替え停止
})
.on('mouseout', function(e) {
    $slide.slick('slickPlay');  // 自動切り替え再開
});
    

javascript – Slick Slider binding hover event – Stack Overflow