【slick】使用するときに気を付けるポイント

スライド時に複数のスライドを切り替えるとき

ポイント
・slick内の調節によって空白のスライドが生じることはない。
・空白のスライドをあらかじめ実装したい場合は、ダミーのdivなどを用意することになる。

スライドカウンターの実装方法

slick内の情報を使うことで、スライドカウンターを実装できる。

$('target').on('afterChange',fucntion(event,slick,currentSlide,nextSlide){
  var slideShow = 3;
  var totalsection = Math.floor(slick.slideCount / slideShow);
  var nowSection = Math.floor(slick.currentSlide / slideShow) + 1;
  $('target').text(nowSection + '/' + totalsection);
})

レスポンシブでスライダーの仕様が大きく変わるとき

ポイント
①$(window).on(‘resize’)内でslickを実行する
②ウィンドウ幅を変えたときに発生するイベントの発火頻度をsetTimerで制限する
③仕様が変わる場合はunslickを混ぜて実装する

$(document).ready(function() {
  var w_size = $(window).width();
  var timer = false;

  function initializeSlick() {
      $('.your-slider-class').slick();
  }

  // 初期化
  initializeSlick();

  // リサイズ時の処理
  $(window).resize(function() {
      if(timer !== false){
        //タイマーが値を持っている時、タイマーをリセットする
        clearTimeout(timer);
      }
      timer = seTimeout(function(){
        //ダミーを全て除外する
        $('dummy').remove();
      })

      w_resize = $(window).width();
      if (windowSize != w_resize){

        // スライダーが実装されていれば、それをリセットする
        if ($('.your-slider-class').hasClass('slick-initialized')) {
            $('.your-slider-class').slick('unslick');
        }

        initializeSlick();
        w_size = $(window).width();
      }
  },100);
});

スライドボタンの微調節

自作の矢印ボタンの実装方法

slickの初期化時に設定が可能。
このとき、appnedArrowsを設定しておくと、矢印のコードを生成する場所を指定できる。

$('target').slick({
arrows:true,
prevArrow:'<div class="prev-arrow"></div>',
nextArrow:'<div class="next-arrow"></div>',
appendArrows:$('arrowBox')
})

次のスライドや前のスライドがないときに進めないようにする

slickで矢印に自動的に付与される「slick-disabled」クラスでスタイルを指定することで、非表示にできる。
なお、slickで矢印を表示する「arrows:true」を設定している場合、display:blockがスタイルに設定されるため、js内でdisplayを排除する設定を事前に仕込む必要がある。

//js
$('.prev-arrow').css('display','');

//css
.prev-arrow.slick-disabled{display:none};