カテゴリー: ウェブ制作

タグ:jQuery(8)  JS(6)  slick(1)  スライダー(2)  使い方(1)  

使い勝手のいいレスポンシブ対応スライダー『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が使いやすい点の一つだと思います!

まとめ

いかがでしたでしょうか?

今までも様々なスライダーをslickで作ってきましたが、slickは本当に様々な環境での使用が想定されていて、非常に使いやすいスライダーだと思います!

それでは、また次の記事で。

2018.09.19

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: 10 ツイート: 0

おすすめの記事

TOP