CATEGORY
jQuery
【jQuery】簡単高機能なスライダー “slick” を使ってみた
33,308 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