便利なプラグインslick.jsですが、使用時に注意する点がいくつかあります。
今回はslick.jsを使う時に注意するポイントを上げていきます。

スライドの間隔(margin)の調整は、スライダー直下の<li>タグで行わない。

これは結構重要です。
これをやるとスライドの位置がズレてしまって、スライダーが正常に動かなくなります。
例えば下記のようにslickを設置した場合に、スライドの間隔(margin)を入れたいと思って、<li>タグに margin や padding の style を独自に適用させてはいけないです。

<script>
  $('#slider').slick();
</script>

<ul id="slider">
  <li> <!-- 省略 --> </li>
  <li> <!-- 省略 --> </li>
  <li> <!-- 省略 --> </li>
</ul>

スライドの間隔(margin)を入れたい場合は以下のように、<li>タグの中に1つ<div>タグを追加して、この<div>タグに margin や padding を適用させると上手く動きます。

<script>
  $('#slider').slick();
</script>
<ul id="slider">
  <li><div> <!-- 省略 --> </div></li>
  <li><div> <!-- 省略 --> </div></li>
  <li><div> <!-- 省略 --> </div></li>
</ul> 

スライドの幅を固定するときは variableWidthオプションを使う。

これも先程の場合と似ていて、スライダー直下の<li>タグに style を無理にあてると、スライダーが上手く動かなくなります。
しかしスライダー全体は可変でも、スライド幅は固定させたい場合もあると思います。
そんな時に役立つのが variableWidthオプション です。
詳しい使い方は、前に書いたことがありますので、こちらの記事で確認してみてください。

「slick.js」の使い方応用編

dots(ドット)やarrows(矢印)のカスタマイズを行うときは、オプションを使う。

slickにはナビゲーションや矢印のオプションが準備されているのですが、無理やりcssを書き換えてカスタマイズしている人がたまにいます。
そんなことをしなくても、ちゃんとカスタマイズできるように、オプションが準備されているので、オプションを使いましょう。
詳しくはこちらの記事で確認してみてください。

slick.jsのdots、arrowsのカスタマイズ方法

responsiveオプションが使えない例外に注意する。

slickはレスポンシブ対応にも、responsiveオプションが用意されていて、非常に優秀なのですが、先日、responsiveオプションを使ってもレスポンシブ対応ができなかったことがありました。
このケース以外にも、responsiveオプションで上手くレスポンシブ対応ができない場合でも使える方法なので、困ったときは使ってみてください。
上手く動作しなかったのは、以下のように記述したときでした。

$('#slider').slick({
  rows:1,
  slidesPerRow:1,
  slidesToShow:4,
  responsive: [
    {
      breakpoint: 600,
      settings: {
        rows:2,
        slidesPerRow:1,
        slidesToShow:2,
      }
    }
  ]
});

細かい設定は省いていますが、rowsオプションとslidesPerRowオプションを使用したときに、上記のような記述にしたのですが、これは上手く動きませんでした。
※rowsオプションとslidesPerRowオプションがわからない人はこちらの記事を確認してください。

よく使うjQueryプラグイン① 「slick.js」

以下のように書き直すと上手く動いてくれました。

let slicktype = "";
const breakPoint = 600;

function slickPc(){
  $('#slider').slick({
    slidesToShow:4
  });
}

function slickSmt(){
  $('#slider').slick({
    rows:2,
    slidesPerRow:1,
    slidesToShow:2,
  });
}

$(function(){
  if( window.innerWidth < breakPoint ){
    slickSmt();
    slicktype = "smt";
  }else{
    slickPc();
    slicktype = "pc";
  }
  $(window).on('resize',function(){
    if( window.innerWidth < breakPoint && slicktype == "pc"){
      $('#slider').slick('unslick');
      slickSmt();
      slicktype = "smt";
    }else if( window.innerWidth >= breakPoint && slicktype == "smt" ){
      $('#slider').slick('unslick');
      slickPc();
      slicktype = "pc";
    }
  });
});

ポイントは「unslick」メソッドを使用している箇所と、「slicktype」という変数を用いている点です。
「unslick」メソッドは一度slickでスライダーにした要素のスライダーを解除します。一度解除すれば、再び違うオプションで設定したslickを適用させることができます。

「slicktype」という変数は、現在のslickの状況を判別するために便宜的に使用しています。
レスポンシブ対応ということで、26行目からはリサイズイベントで発火するようにしているのですが、リサイズするたびに、「unslick」でスライダーを解除して、再びslickでスライダー生成するということで動いていたら、負担がかかってしまいます。
なので、breakPoint をまたいだ時だけ、それぞれの関数が動くように、「slicktype」という変数を用いています。