Home Web 【jQuery】高機能スライダープラグイン「Slick」の使い方

【jQuery】高機能スライダープラグイン「Slick」の使い方

簡単に実装できて高機能なスライダー系jQueryプラグイン「Slick」の使い方。
レスポンシブ、タッチデバイス対応でオプション設定も豊富。

DEMOページを作ってみました。
1つ目のスライドは初期設定のまま、2つ目のスライドは色々とカスタマイズしてます。

DEMO jQuery Slick | MISOBLOG

Slickのダウンロード

公式サイト

slick – the last carousel you’ll ever need

Slickのダウンロード

ナビゲーションの「get it now」をクリックした先の「Download Now」ボタンからデータ一式をダウンロードできます。

ダウンロードしたSlickのZIPファイルを解凍し、その中から下記のファイルを使用します。

  • slick.css
  • slick.min.js
  • slick-theme.css
  • ajax-loader.gif
  • fonts(フォルダ)

CSSとJSの読み込み


<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/slick.min.js"></script>

「slick-theme.css」を編集することで、スタイルのカスタマイズを行えます。

スライドさせるコンテンツ(HTML)

HTML


<div class="slick1">
    <div><img src="images/img1.jpg" width="800" height="600" alt=""></div>
    <div><img src="images/img2.jpg" width="800" height="600" alt=""></div>
    <div><img src="images/img3.jpg" width="800" height="600" alt=""></div>
    <div><img src="images/img4.jpg" width="800" height="600" alt=""></div>
    <div><img src="images/img5.jpg" width="800" height="600" alt=""></div>
</div>

JavaScript

基本的なスライダーは1行書くだけで完成です。


$(function() {
    $('.slick1').slick();
});

オプション設定はこのような感じで書きます。


$(function() {
    $('.slick2').slick({
        autoplay: true,
        dots: true,
        centerMode: true,
        centerPadding: '20%',
        slideToShow: 1,
        focusOnSelect: true,
        speed: 1000,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    centerMode: false
                }
            }
        ]
    });
});

Slickのオプション

オプション名オプション説明初期値
accessibilityキーボードの矢印キーの左右で画像切り替えtrue
adaptiveHeightスライドの高さを揃えるfalse
autoplay自動再生false
autoplaySpeed自動再生のスピード3000
arrows前・次の矢印true
asNavForページ内の他のスライドと連携させたい時にIDまたはClass名を指定null
appendArrows矢印ナビの生成位置を変更$(element)
appendDotsドットナビの生成位置を変更$(element)
prevArrow「前へ」ボタンのHTMLカスタマイズ<button type=“button” class=“slick-prev”>Previous</button>
nextArrow「次へ」ボタンのHTMLカスタマイズ<button type=”button” class=”slick-next”>Next</button>
centerMode現在のスライドを中央に表示false
centerPaddingcenterModeの左右のスライドを見せる幅を指定(px of %)50px
cssEaseスライド切り替え時のアニメーションの指定ease
customPagingナビゲーションをサムネイルなどに変更
dotsドットのナビゲーションを表示false
dotsClassドットナビゲーションのクラス名を変更’slick-dots’
draggableドラッグでスライド切り替えtrue
fadeスライド切り替えをフェードにするfalse
focusOnSelectクリックした要素にスライドするfalse
easingイージングの指定’linear’
infiniteスライドの無限ループtrue
edgeFrictioninfinite:falseの時、端のスライドをスワイプした時のバウンドする値0.15
initialSlide最初のスライドの位置0
lazyLoad画像の遅延表示。’ondemand’または’progressive’を指定ondemand
mobileFirstresponsiveオプションのモバイル設定を初期値にするfalse
pauseOnFocusフォーカス時、自動再生を一時停止させるかtrue
pauseOnHoverホバー時、自動再生を一時停止させるかtrue
pauseOnDotsHoveerドットナビにホバー時、自動再生を一時停止させるかtrue
respondToレスポンシブのwidthの判定。window_slider_minwindow
responsiveレスポンシブのブレイクポイントを設定してオプションを切り替えnone
rowsスライドの行数を設定1
slideスライド部分の要素のタグ名
slidesPerRowrowsの値が2以上の時、1行あたりに表示させるスライド数1
slidesToShow表示するスライド数1
slidesToScrollスクロールするスライド数1
speedスライドのアニメーションの速度を設定300
swipeスワイプを有効にするかtrue
swipeToSlideSslidesToScrollの値に関係なく、ドラッグやスワイプでスライドさせる際は1スライドずつ動かすfalse
touchMoveタッチでスライドさせるかtrue
touchThreshold(1 / touchThreshold) * スライダーの横幅分ドラッグするとスライドされる5
useCSSCSS transitionを有効化true
useTransformCSS transformを有効化true
variableWidthスライドの横幅をバラバラにするfalse
vertical縦方向にスライドさせるfalse
verticalSwiping縦方向のスワイプを有効にするfalse
rtlスライダーの方向を右から左に変更(親要素に「dir=“trl”を記述」)false
waitForAnimateスライドアニメーション中サムネイルをクリックした時反応させないtrue
zIndexスライドの重なり順1000