カルーセル(スライダー)を簡単に作る「slick.js」の使い方

JAVASCRIPT

最近仕事でスライダーを作る時はもっぱらslick.jsを使っています。

以前はCaroufredselを使用していたのですが、サイトが閉鎖してしまったので移行しました。slick.jsはデザインに合わせて作るうえで若干使いにくい部分もあるんですが、レスポンシブ対応されており、オプションやイベントも用意されていて使いやすいのでお勧めです。

今回はオプションやイベントなども含め使い方をまとめてみました。

本家サイトとDemo

Slickの本家サイトはこちら

http://kenwheeler.github.io/slick/

英語サイトですが、Demoと使い方が多く用意されています。

ナビゲーションの「Get it now」をクリックするとダウンロードボタンがありますので、ダウンロードします。

使い方

ダウンロードしたzipファイルを解凍し、slickフォルダを開きます。

「fonts」フォルダと、「ajax-loader.gif」「slick.css」「slick-theme.css」「slick.min.js」をコピーして読み込ませます。

サンプルを作成してみました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slick.jsのDemo</title>
<link rel="stylesheet" type="text/css" href="slick-theme.css">
<link rel="stylesheet" type="text/css" href="slick.css" />
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.slider {
		max-width: 600px;
		margin: 0 auto;
	}
</style>
</head>
<body>
	<section class="slider">
		<img src="./img/slide1.jpg">
		<img src="./img/slide2.jpg">
		<img src="./img/slide3.jpg">
	</section>	
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./js/slick.min.js"></script>
<script>
$(function()
{
	$('.slider').slick();
})	
</script>
</body>
</html>

サンプルを見て頂くとわかると思うのですが、左右の矢印が見えません。

slick.jsの初期設定では左右の矢印がテキストで作成されているのですが、フォントの色が白色なせいで背景と同化してしまって見えていない状態になります。

例えば17~18行目に色の指定を追加してあげると見えるようになります。

サンプル2

<style>
	body {
		margin: 0;
		padding: 0;
	}
	.slider {
		max-width: 600px;
		margin: 0 auto;
	}
	.slick-prev:before,
	.slick-next:before {
		color: #666;
	}
</style>

矢印が変なボタンになっていたり、上手く動かない場合はファイルの置き場所が間違っているかも知れません。

この辺面倒なのですが、slick-theme.cssの中にfontsフォルダを読み込む設定が入っています。slick-theme.cssと同じ場所にfontsフォルダを置く必要があります。ajax-loader.gifも同様です。

オプションの一覧

説明部分はgoogle翻訳です。

slick()の中に必要なものを書くと変更できます。

$(function()
{
	$('.slider').slick(
	{
		autoplay: true,
		autoplaySpeed: 500
	});
})
オプションデフォルトの設定説明
accessibilitytrueタブと矢印キーによるナビゲーションを有効にします
adaptiveHeightfalseシングルスライドの水平カルーセルに適応する高さを有効にします。
autoplayfalse自動再生を有効にする
autoplaySpeed3000自動再生速度(ミリ秒)
arrowstrue前/次の矢印
asNavFornullスライダを他のスライダのナビゲーションになるように設定します(クラス名またはID名)。
appendArrows$(element)ナビゲーション矢印が付けられている場所を変更する(Selector、htmlString、Array、Element、jQueryオブジェクト)
appendDots$(element)ナビゲーションドットを付ける場所を変更する(Selector、htmlString、Array、Element、jQueryオブジェクト)
prevArrow<button type=”button”
class=”slick-prev”
>Previous
</button>
ノードを選択したり、「前へ」の矢印のHTMLをカスタマイズしたりできます。
nextArrow<button type=”button”
class=”slick-next”
>Next
</button>
ノードを選択したり、「次へ」矢印のHTMLをカスタマイズしたりできます。
centerModefalse部分的な前/次のスライドで中央ビューを有効にします。奇数番号のスライドで使用します。
centerPadding’50px’センターモード時のサイドパディング(pxまたは%)
cssEase‘ease’CSS3アニメーションイージング
customPagingn/aカスタムページングテンプレート 使用例についてはソースを参照してください。
dotsfalseドットインジケーターを表示する
dotsClass‘slick-dots’スライドインジケータードットコンテナのクラス
draggabletrueマウスドラッグを有効にする
fadefalseフェードを有効にする
focusOnSelectfalse選択した要素にフォーカスを合わせる(クリック)
easing‘linear’jQueryアニメートのイージングを追加します。イージングライブラリまたはデフォルトのイージング方法で使用する
edgeFriction0.15非無限カルーセルの端をスワイプするときの抵抗
infinitetrue無限ループスライディング
initialSlide0開始スライド
lazyLoad‘ondemand’遅延ロード手法を設定します。「オンデマンド」または「プログレッシブ」を受け入れます
mobileFirstfalseレスポンシブ設定はモバイルファースト計算を使用
pauseOnFocustrueフォーカスで自動再生を一時停止
pauseOnHovertrueホバー時に自動再生を一時停止する
pauseOnDotsHoverfalseドットが浮かんだときに自動再生を一時停止する
respondTo‘window’応答オブジェクトが応答する幅。’window’、 ‘slider’、または ‘min’(どちらか小さい方)
responsivenoneブレークポイントと設定オブジェクトを含むオブジェクト(デモ参照)。与えられた画面幅で設定セットを有効にします。特定のブレークポイントでスリックを無効にするには、設定をオブジェクトではなく「アンスリック」に設定します。
rows1これを2以上に設定すると、グリッドモードが初期化されます。slidesPerRowを使用して、各行に配置するスライドの数を設定します。
slideスライドとして使用する要素クエリ
slidesPerRow1行オプションで初期化されたグリッドモードでは、これは各グリッド行にいくつのスライドがあるかを設定します。
slidesToShow1表示するスライドの数
slidesToScroll1スクロールするスライドの数
speed300スライド/フェードアニメーションの速度(ミリ秒)
swipetrueスワイプを有効にする
swipeToSlidefalseユーザーがスライドに関係なくスライドに直接ドラッグまたはスワイプできるようにする
touchMovetrueタッチでスライドモーションを有効にする
touchThreshold5スライドを進めるには、ユーザーは長さ(1 / touchThreshold)*スライダーの幅をスワイプする必要があります。
useCSStrueCSSトランジションを有効/無効にする
useTransformtrueCSS変換を有効/無効にする
variableWidthfalse可変幅スライド
verticalfalse縦スライドモード
verticalSwipingfalse縦スワイプモード
rtlfalseスライダの方向を右から左に変更する

※HTMLタグまたはスライダーの親は、属性「dir」を「rtl」に設定する必要があります。

waitForAnimatetrueアニメート中にスライドを進める要求を無視します
zIndex1000スライドのzIndex値を設定します。IE9以下で役に立ちます

イベントの一覧

イベントの書き方のサンプル

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});
イベント名引数説明
afterChangeslick, currentSlideスライド変更後に発生します
beforeChangeslick, currentSlide, nextSlideスライド変更前に発生します
breakpointevent, slick, breakpointブレークポイントがヒットした後に発生します。
destroyevent, slickスライダーが破壊されたとき、または滑り止めされたとき。
edgeslick, directionエッジが非無限モードでオーバースクロールされたときに発生します。
initslick最初の初期化後に発生します。
reInitslick再初期化のたびに発生します
setPositionslick位置/サイズ変更後に発生します
swipeslick, directionスワイプ/ドラッグ後に発生します
lazyLoadedevent, slick, image, imageSource画像が遅れて読み込まれた後に発生します
lazyLoadErrorevent, slick, image, imageSource画像が読み込めなかった後に発生します

メソッドの一覧

メソッドの書き方のサンプル

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

// Manually refresh positioning of slick
$('.your-element').slick('setPosition');

// destroy unslick
$('.your-element').slick('unslick');
メソッド名引数説明
slickCurrentSlidenone現在のスライドインデックスを返します
slickGoToint : slide number, boolean: dont animateインデックスでスライドに移動します
slickNextnone次のスライドに移動します
slickPrevnone前のスライドに移動する
slickPausenone自動再生を一時停止します
slickPlaynone自動再生を開始します
slickAddhtml or DOM object, index, addBeforeスライドを追加する インデックスが指定されている場合はそのインデックスに追加されます。addBeforeが設定されている場合はその前に追加されます。インデックスが指定されていない場合は、addBeforeが設定されている場合は末尾または先頭に追加します。HTML文字列を受け入れます|| 対象
slickRemoveindex, removeBeforeスライドをインデックスで削除します。removeBeforeがtrueに設定されている場合は、インデックスの前のスライド、またはインデックスが指定されていない場合は最初のスライドを削除します。removeBeforeがfalseに設定されている場合は、インデックスの次のスライド、またはインデックスが設定されていない場合は最後のスライドを削除します。
slickFilterSelector or FunctionjQuery .filter()を使ってスライドをフィルタリングする
slickUnfilterindex適用されたフィルタリングを削除します
slickGetOptionoption : string個々のオプション値を取得します。
slickSetOptionoption : string, value : depends on option, refresh : boolean個別の値をliveに設定します。UIの更新である場合は、更新をtrueに設定してください。
unslicknone解体が滑らか
getSlicknone滑らかなオブジェクトを取得

最後に

色々サンプルを作ろうかと思いましたが疲れたのでこれにて。

タイトルとURLをコピーしました