CATEGORY

jQuery

jQuery】簡単高機能なスライダー “slick” を使ってみた

slick な滑り台

32,269 PV

Webサイトを構築したことがある人は、必ず一度は経験しているであろうフォトスライダー。僕は今まで “carouFredSel” というプラグインを使っていたのですが、今回このサイトでは新しく “slick” というプラグインを導入してみました。

お世話になった “carouFredSel”

久しぶりに見たら本家では jQuery のプラグイン版は表に出ておらず、有料の WordPress プラグインだけになってました。ちょうど潮時だったのかな?

こちらは分かりやすく carouFresSel の使い方を解説してくださっているサイトさん。今までかなりお世話になりました。

これからよろしく “slick”

正直どのプラグインも実装自体は簡単な気がしますが、とりあえず動作が安定していてレスポンシブ対応、カルーセル対応という条件からこのプラグインを選びました。

実装はよくあるパターンで、まずはファイルの読み込み。
( jQuery は先に読み込んでおいてください)

<link rel="stylesheet" href="***/***/slick.css">
<link rel="stylesheet" href="***/***/slick-theme.css">
<script src="***/***/slick.min.js"></script> 

次に jQuery で実行。

<script>
$(function(){
    $('.ELEMENT').slick();
});
</script>

とりあえずこれだけで OK ★
各種オプションの設定は、以下の中から必要な分だけをどうぞ。

各種オプション

$('.ELEMENT').slick({
    //矢印キーやTabキーでのナビゲーションの有無(初期値:true)
    accessibility: true,
    //スライダーの高さをカレントスライドに合わせるかどうか(初期値:false)
    adaptiveHeight: true,
    //自動再生(初期値:false)
    autoplay: true,
    //自動再生時の各スライド静止時間(初期値:3000)
    autoplaySpeed: 5000,
    //複数スライド表示時に、カレントスライドを中心に表示するかどうか(初期値:false)
    centerMode: true,
    //センターモード時に左右の見切れスライドを表示させる範囲
    //(初期値:'50px')(px or %)
    centerPadding: true,
    //CSS3によるイージング設定(初期値:'ease')
    cssEase: 'linear',
    //ちょっとデモが見つからないw(初期値:n/a)
    customPaging: function(){},
    //スライドの下にナビゲーションドットを表示するかどうか(初期値:false)
    dots: true,
    //ナビゲーションドットのulについているクラス(初期値:'slick-dots')
    dotsClass: 'dotsNavi',
    //画像をデスクトップにドラッグしてコピーできるかどうか(初期値:true)
    draggable: true,
    //jQueryのanimate()によるイージング設定(初期値:'linear')
    easing: 'ease',
    //infiniteになっていないスライダーの先端、後端での
    //引っ張れる具合?(初期値:0.15)(int型)
    edgeFriction: 0.3,
    //fade効果を使うかどうか(初期値:false)
    fade: true,
    //矢印ナビゲーションの有無(初期値:true)
    arrows: true,
    //矢印ナビゲーションの追加対象セレクタ(初期値:$(element))
    appendArrows: $('#arrows'),
    //ドットナビゲーションの追加対象セレクタ(初期値:$(element))
    appendDots: $('#dots'),
    //レスポンシブ設定時にモバイル用設定を初期として持つかどうか?(初期値:false)
    mobileFirst: false,
    //前への矢印ボタンはここでソースを変更してね
    //(初期値:<button type="button" class="slick-prev">Previous</button>)
    prevArrow: '<button type="button" class="slick-prev">前へ</button>',
    //次への矢印ボタンはここでソースを変更してね
    //(初期値:<button type="button" class="slick-next">Next</button>)
    nextArrow: '<button type="button" class="slick-next">次へ</button>',
    //無限スクロール。カルーセル。(初期値:true)
    infinite: true,
    //最初に表示する(カレントにする)スライド番号(初期値:0)
    initialSlide: 2,
    //遅延ロードの設定。表示するタイミングで読み込む'ondemand'か、
    //バックグラウンドで読み込んでおく'progressive'か(初期値:'ondemand')
    lazyLoad: 'progressive',
    //フォーカス時にスライダを止めるかどうか(初期値:true)
    pauseOnFocus: true,
    //ホバー時にスライダを止めるかどうか(初期値:true)
    pauseOnHover: true,
    //ドットナビゲーションホバー時にスライダを止めるかどうか(初期値:false)
    pauseOnDotsHover: true,
    //レスポンシブの対象。window/slide/min(初期値:'window')
    //(minはwindow/slideのどちらか小さい方)
    respondTo: 'min',
    //レスポンシブ設定。breakpointごとに設定できる。
    //以上なのか以下なのかイマイチ不明(初期値:null)
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }
    }, {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }
    }, {
      breakpoint: 300,
      settings: "unslick" // destroys slick
    }],
    //複数行スライダにした場合の行数。(初期値:1)
    rows: 1,
    //クエリらしい?(初期値:true)
    slide: '',
    //rowsを設定した際の各行の要素数(初期値:1)
    slidesPerRow: 3,
    //一度に表示するスライドの数(初期値:1)
    slidesToShow: 3,
    //一度にスクロールするスライドの数(初期値:1)
    slidesToScroll: 3,
    //スクロールしている秒数(初期値:300)
    speed: 1000,
    //スワイプに対応するかどうか(初期値:true)
    swipe: true
    //スワイプでスライドさせるかどうか(初期値:false)
    swipeToSlide: false
    //スライドを触って動くようにするのか(初期値:true)
    touchMove: true
    //スライドを動かすためのスワイプ距離。
    //スライドのwidthをこの値で割った値を使う(初期値:5)
    touchThreshold: 2
    //CSS transitionを有効にするかどうか(初期値:true)
    useCSS: true
    //CSS transformを有効にするかどうか(初期値:true)
    useTransform: true
    //スライドの横幅を要素にあわせて自動で計算するかどうか
    //色々な横幅の画像をスライダにすることができる(初期値:false)
    variableWidth: true
    //縦型スクロールにするかどうか(初期値:false)
    vertical: false
    //縦スクロールでスワイプを使えるようにする(初期値:false)
    verticalSwiping: false
    //スライダの順番を逆順にする(初期値:false)
    rtl: true
    //アニメーション中のスライド要求を無視する(初期値:true)
    waitForAnimate: true
    //CSSのzindexと同じ。要素のレイヤーとしての深度を表す(初期値:1000)
    zIndex: 4000
});

おまけの EVENT 一覧

$('.ELEMENT').on({
    //スライドが変わった後に発火
    'afterChange': function(slick, currentSlide){...},
    //スライドが変わり始める前に発火
    'beforeChange': function(slick, currentSlide, nextSlide){...},
    //ブレークポイントがhitした後に発火
    'breakpoint': function(event, slick, breakpoint){...},
    //スライダが壊れたかunslickedされたときに発火
    'destroy': function(event, slick){...},
    //infiniteモードでない場合に、スライドの端より先に行こうとしたときに発火
    'edge': function(slick, direction){...},
    //.slick()が最初にinitializationされた後に発火
    'init': function(slick){...},
    //initializationされるとき?毎回発火
    'reInit': function(slick){...},
    //position/sizeに変更があったときに発火
    'setPosition': function(slick){...},
    //swipe/dragが行われたときに発火
    'swipe': function(slick, direction){...},
    //画像の遅延ロードが行われたときに発火
    'lazyLoaded': function(event, slick, image, imageSource){...},
    //画像の遅延ロードに失敗したときに発火
    'lazyLoadError': function(event, slick, image, imageSource){...},
});

ここまできたら Method も載せようw

//カレントスライドの番号を返す
$('.ELEMENT').slick('slickCurrentSlide');
//int番のスライドへ移動する。アニメーションをしない(true/false)
$('.ELEMENT').slick('slickGoTo', int, dontAnimate);
//次のスライドへのナビゲーション?
$('.ELEMENT').slick('slickNext');
//前のスライドへのナビゲーション?
$('.ELEMENT').slick('slickPrev');
//自動再生の一時停止
$('.ELEMENT').slick('slickPause');
//自動再生の再開
$('.ELEMENT').slick('slickPlay');
//スライドの追加。
//index+addBefore(false)でindexの位置に。
//index+addBefore(true)ならindexの前に。
//indexナシ+addBefore(false)なら最後に。
//indexナシ+addBefore(true)なら一番初めに。
$('.ELEMENT').slick('slickAdd', 'html/DOM', index, addBefore);
//スライドの削除。
//index+removeBefore(false)でindex位置のスライド。
//index+removeBefore(true)ならindexの前のスライド。
//indexナシ+removeBefore(false)なら最後のスライド。
//indexナシ+removeBefore(true)なら一番初めのスライド。
$('.ELEMENT').slick('slickRemove', index, removeBefore);
//スライダにjQuery.filter()を使う。
$('.ELEMENT').slick('slickFilter', Selector or Function);
//slickFilterで付けたfilterを削除。indexでのスライド指定も可。
$('.ELEMENT').slick('slickUnfilter', index);
//各種オプションの設定値を取得
$('.ELEMENT').slick('slickGetOption', option);
//各種オプションの値を設定。UIに変更を加えた場合はrefreshをtrueに。
$('.ELEMENT').slick('slickSetOption', option, value, refresh);
//slickを終了させる
$('.ELEMENT').slick('unslick');
//slick Objectを返す
$('.ELEMENT').slick('getSlick');

これだけあれば、きっと色んな事が出来るに違いない!
ちょっとよく分からない所もいくつかありましたが、大半のことはできるんじゃないかと思います。皆様もより良い slick ライフを~★

最新機能はこちらの GitHub でも確認してみてください。

実装には下記サイトさんを参考にしました。

 

CATEGORY : jQuery

TAGS : | |

GO TOP