使い勝手のいいレスポンシブ対応スライダー『slick』のオプションを紹介！

以前、使い勝手のいいレスポンシブ対応スライダーとしてブログで紹介した『slick』

レスポンシブ対応のスライダー『slick』が使いやすくておすすめ
https://www.tipdip.jp/tips_posts/production/1549/

『slick』はオプションを設定することで様々な使い方ができます。

オプションは公式サイト内で英語で紹介されていますが、今回はこれを日本語で解説していきたいと思います！

slick – the last carousel you’ll ever need
http://kenwheeler.github.io/slick/#settings

それでは、次項より解説していきたいと思います。

オプション一覧

以下が用意されている全てのオプションです。

この様にオプション設定を組み合わせていくことで、使用する状況に合ったスライダーを作成することができます！

オプション名	解説	初期値
accessibility	キーボードの矢印キーやTabキーで操作できるか	true
adaptiveHeight	スライダーの高さを現在のスライド（.slick-current）に合わせるか	false
autoplay	スライダーの自動再生をするか	false
autoplaySpeed	自動再生時のスライドの静止時間	3000
arrows	前へ、次への矢印ボタンの有無	true
asNavFor	他のスライダーと連動	null
appendArrows	矢印ボタンを生成する場所を変更（指定した要素の中に生成）	$(element)
appendDots	ドットナビゲーションボタンを生成する場所を変更（指定した要素の中に生成）	$(element)
prevArrow	矢印ボタンの「前へ」のHTMLをカスタマイズ	<button type=”button” class=”slick-prev”>Previous</button>
nextArrow	矢印ボタンの「次へ」のHTMLをカスタマイズ	<button type=”button” class=”slick-next”>Next</button>
centerMode	現在のスライド（.slick-current）を中央に表示し、前後のスライドを左右に見切れた状態で表示する（スライドが奇数時）	false
centerPadding	centerModeがtrueの時、前後のスライドの表示幅	’50px’
cssEase	CSS3のイージングを指定	‘ease’
customPaging	functionを使用してドットナビゲーションボタンをカスタマイズする	n/a
dots	ドットナビゲーションボタンを表示するかどうか	false
dotsClass	ドットナビゲーションボタンのclass名を指定	‘slick-dots’
fade	スライドの切り替えをフェードにするかどうか	false
focusOnSelect	クリックしたスライドに切り替えるかどうか	false
easing	jQueryのイージングを指定	‘linear’
edgeFriction	infinite: falseの時、両端のスライドをスワイプした時のバウンドする幅	0.15
infinite	スライドの端まできた時にループさせるかどうか	true
initialSlide	最初に表示するスライドを指定	0
lazyLoad	遅延ロードの設定。’ondemand’か’progressive’で指定	ondemand
mobileFirst	レスポンシブ設定でモバイルファーストにするかどうか	false
pauseOnFocus	autoplay: trueの時、スライドをフォーカスしたら一時停止するかどうか	true
pauseOnHover	autoplay: trueの時、スライドにホバーさせると一時停止するかどうか	true
pauseOnDotsHover	autoplay: trueの時、ドットナビゲーションボタンにホバーさせると一時停止するかどうか	true
respondTo	レスポンシブの基準を設定’window’、’slider’または’min’（2つのうち小さい方）で指定	window
responsive	レスポンシブのブレイクポイントを指定	none
rows	2以上でグリッドモードを初期化。slidesPerRowと併用して、各行に含めるスライドの数を設定	1
slide	スライドとして使用する部分のタグ名を設定	”
slidesPerRow	rowsのオプションでグリッドモードを初期化した際に有効。各行のスライドの数を設定	1
slidesToShow	同時に表示されるスライドの数を設定	1
slidesToScroll	同時にスクロールされるスライドの数を設定	1
speed	アニメーションの切り替えスピード	300
swipe	スワイプでスライドを変更できるかどうか	true
swipeToSlide	slidesToScrollで設定した値に関係なく、スライドをドラッグまたはスワイプできるかどうか	false
touchMove	タッチでスライドさせられるかどうか	true
touchThreshold	スライダー幅に対して、【1/touchThresholdの値】をスワイプするとスライドが切り替わる	5
useCSS	CSSのtransitionを有効にするかどうか	true
useTransform	CSSのtransformを有効にするかどうか	true
variableWidth	スライド毎に横幅が違う場合、スライド幅を可変にするかどうか	false
vertical	スライドを縦方向にするかどうか	false
verticalSwiping	縦方向のスワイプを有効にするかどうか	false
rtl	スライドの順番を逆にするかどうか	false
rtl	スライドの順番を右→左にするかどうか	false
waitForAnimate	スライドアニメーション中に別のスライドを表示する動作を無効化するかどうか	true
zIndex	z-indexの値を設定する	1000

オプションの設定方法

まず、slickの詳しい設定方法に関しては前回記事で紹介していますので、そちらを参照してください。

オプションの設定は次のように行なっていきます。

    $(function() {
        $('.slider').slick({
            autoplay: true,
            autoplaySpeed: 3000,
            slidesToShow: 3,
            responsive: [{
              breakpoint: 640,
              settings: {
                slidesToShow: 2,
              },{
              breakpoint: 480,
              settings: {
                slidesToShow: 1,
              }
            }]
        });
    });

使用する上でややこしいのはresponsiveでしょうか。

例えば、上の設定ではresponsiveの中に『breakpoint: 640』と『breakpoint: 480』が設定されています。

この場合、ウィンドウ幅が641px以上の時はslidesToShowが3、640px〜481pxではslidesToShowが2、480px以下の時にslidesToShowが1という設定を行なっているということです。

ウインドウ幅によって細かく設定を変えられる点も、slickが使いやすい点の一つだと思います！