slick.jsの使い方まとめ

カルーセル関連の色々な機能を実装できる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();
});

slick.jsのデモページ
 

オプション

詳しくは、公式サイトのオプションやサンプルをご確認ください。
オプション設定のデモページ

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 要素の取得?

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

3件のコメント

  1. […] slick.jsの使い方まとめ […]

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31