カルーセル関連の色々な機能を実装できるjQueryのプラグイン「slick.js」の使い方をメモ。
使い方
slick.jsは下記からダウンロードできます。
slick – the last carousel you’ll ever need
ダウンロード後、必要なファイルを読み込みます。
<link rel="stylesheet" href="./slick-theme.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./slick.min.js"></script>
HTML
<div id="sample"> <div>コンテンツ01</div> <div>コンテンツ02</div> <div>コンテンツ03</div> <div>コンテンツ04</div> <div>コンテンツ05</div> </div>
JavaScript
$(function() {
$('#sample').slick();
});
オプション
詳しくは、公式サイトのオプションやサンプルをご確認ください。
オプション設定のデモページ
OPTION
| accessibility | キーボード操作 初期値はtrue。 |
|---|---|
| adaptiveHeight | スライドの高さ揃え？ 初期値はfalse。 |
| autoplay | 自動切り替え 初期値はfalse。 |
| autoplaySpeed | 自動切り替えの待ち時間 初期値は3000。 |
| arrows | 前後ボタンのナビゲーションの有無 初期値はtrue。 |
| asNavFor | 他のスライダーのナビゲーションを設定する 初期値はnull。 |
| appendArrows | 前後ボタンのナビゲーションの場所移動？指定した要素内にbuttonタグが入る 初期値は$(element)。 |
| prevArrow | 前ボタンのナビゲーションのタグ変更 初期値は<button type=”button” class=”slick-prev”>Previous</button>。 |
| nextArrow | 次ボタンのナビゲーションのタグ変更 初期値は<button type=”button” class=”slick-next”>Next</button>。 |
| centerMode | 要素を中央揃え 初期値はfalse。 |
| centerPadding | 要素を中央揃えにした時の左右のパディング設定 初期値は’50px’。 |
cssEase | CSSでアニメーションさせる場合のイージング 初期値は’ease’。 |
| customPaging | ページ送りのカスタム？ 初期値はn/a。 |
| dots | 黒点の表示 初期値はfalse。 |
| draggable | マウスドラッグを有効にするかどうか 初期値はtrue。 |
| fade | 切り替えをフェードで行うかどうか 初期値はfalse。 |
| focusOnSelect | クリックした要素のフォーカスを有効にする？ 初期値はfalse。 |
| easing | イージング 初期値は’linear’。 |
| edgeFriction | ループでないカルーセルの端での抵抗処理？ 初期値は0.15。 |
| infinite | スライドをループさせるかどうか 初期値はtrue。 |
| initialSlide | スライダーの初期表示要素の指定 初期値は0。 |
| lazyLoad | 要素のロードするタイミングをずらすかどうか 初期値は’ondemand’。 |
| mobileFirst | レスポンシブの設定でモバイルの計算を優先させる？ 初期値はfalse。 |
| pauseOnHover | 自動切り替え設定時に、オンマウスで一時停止させるかどうか 初期値はtrue。 |
| pauseOnDotsHover | 自動切り替え設定時に、黒点にオンマウスで一時停止させるかどうか 初期値はfalse。 |
| respondTo | レスポンシブの反応する項目？ ‘window’ か ‘slider’ か ‘min’ 初期値は’window’。 |
| responsive | breakpointの幅を指定して、画面幅がbreakpoint以下の時のオプションを設定 初期値はnone。 |
| slide | スライドする要素の指定 初期値は”。 |
| slidesToShow | 表示する要素の数 初期値は1。 |
| slidesToScroll | 1回のスライドで動かす要素数 初期値は1。 |
| speed | スライド(フェード)のスピード 初期値は300。 |
| swipe | スワイプでのスライドを有効にするかどうか 初期値はtrue。 |
| swipeToSlide | マウスドラッグやスワイプ時に、slidesToScrollで設定している以上に移動させるかどうか 初期値はfalse。 |
| touchMove | スワイプ中のスライダーの移動を有効にするかどうか 初期値はtrue。 |
| touchThreshold | (1/touchThreshold) * スライダーの幅だけスワイプするとスライドするみたいな設定？ 値を小さくするほどスライドするのに必要なスワイプ距離が増えるっぽい 初期値は5。 |
| useCSS | CSSトランジションを有効にするかどうか 初期値はtrue。 |
| variableWidth | 要素の幅が異なるときにtrue？ 初期値はfalse。 |
| vertical | 垂直方向のスライドにするかどうか 初期値はfalse。 |
| rtl | スライダーの移動方向 初期値はfalse。 |
EVENT
| afterChange | slick, currentSlide スライド変更後に発火 |
|---|---|
| beforeChange | スライド変更前に発火 |
| edge | slick, direction ループでない時に、端より先へ移動しようとした際に発火 |
| init | slick 初期化完了後に発火？ |
| reInit | slick 全ての再初期化完了後に発火？ |
| setPosition | slick 位置やサイズの変更後に発火 |
| swipe | slick, direction マウスドラッグやスワイプ後に発火 |
METHODS
| slickCurrentSlide | 現在のスライドのインデックス番号を返す |
|---|---|
| slickGoTo | 指定したスライドへ移動 |
| slickNext | 次のスライドへ移動 |
| slickPrev | 前のスライドへ移動 |
| slickPause | 自動切り替えの停止 |
| slickPlay | 自動切り替え開始 |
| slickAdd | スライド要素の追加 |
| slickRemove | スライド要素の削除 |
| slickFilter | フィルターでスライド要素の絞り込み |
| slickUnfilter | フィルターの解除 |
| slickGetOption | オプションの値を取得 |
| slickSetOption | オプションの値を設定 |
| unslick | 脱構築 |
| getSlick | 要素の取得？ |
【参考サイト】
コメントが承認されるまで時間がかかります。