slick.js dotsの表示/非表示を動的に変更する

2469 ワード
jQuery slick bootstrap4 jQuery テキストリンク

やりたいこと

写真が複数枚のときはdotsを表示したい。
写真が1枚のときはdotsを非表示にしたい。
以下のように。
　　

方法

$(function () {
  $('.slider').on('init', function (event, slick) {
    if (slick.slideCount <= 1) {
      // bootstrap使っているのでaddClass()で対応
      $(this).find('.slick-dots').addClass('d-none');
    }

  });
  $('.slider').slick({
    dots: true
  });
});

わりとシンプルなのに、たどり着くのに1時間以上かかってしまった。
精進します。