jQueryのプラグイン「slick」の矢印ボタンで次の画像に進む、前の画像に戻る方法

Question

jQueryのプラグイン「slick」で矢印ボタンを表示させています。

$(function(){
  $('.main-line').slick({
    //自動再生を有効にするか。
    autoplay:true,
    //自動再生のスライド切り替えまでの時間をミリ秒で設定。
    autoplaySpeed:5000,
    //ドットインジケーターを表示するか。
    dots:true,
    //スライドの左右の矢印ボタンを表示するか。
    arrows:true,
    //自動再生時にスライドにフォーカスした際、自動再生をストップさせるか。
    pauseOnFocus:false,
  });
});

そして画面が下記の表示です。

矢印ボタンも表示され、ドットインジケーターも表示されています。

しかし、矢印のボタンを押しても反応しません。

いろいろ調べていくと、このような方法を見つけました。

$(function(){
  $('.main-line').slick({
    //	自動再生を有効にするか。
    autoplay:true,
    //自動再生のスライド切り替えまでの時間をミリ秒で設定。
    autoplaySpeed:5000,
    //ドットインジケーターを表示するか。
    dots:true,
    //スライドの左右の矢印ボタンを表示するか。
    arrows:true,
    //	自動再生時にスライドにフォーカスした際、自動再生をストップさせるか。
    pauseOnFocus:false,
  });
  $('button').on('click',function(){
    $('.sildes').slick('slickNext');
  });
  $('button').on('click',function(){
    $('.sildes').slick('slickPrev');
  });
});

このようにbuttonでclickを設定、画像にはsildesを設定させているので、buttonをclickすると、画像が次へ行く、戻るという意味で解釈しました。

ちなみにbuttonは、テキストエディタでは記載をしていませんが、Chromeデベロッパー・ツールには記載があります。
（slickプラグインの仕様なのかも）

<button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button>
<button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button>

（下記のように画像それぞれにclassを付与）

<ul class="main-line">
  <li><img src=https://cdn.pixabay.com/photo/2017/08/29/20/25/cosmetics-2694764_960_720.jpg class="sildes"></li>
  <li><img src=https://cdn.pixabay.com/photo/2016/05/02/17/56/lipstick-1367773_960_720.jpg class="sildes"></li>
  <li><img src=https://cdn.pixabay.com/photo/2017/03/04/15/53/cosmetics-2116367_960_720.jpg class="sildes"></li>
  <li><img src=https://cdn.pixabay.com/photo/2018/03/01/14/57/portrait-3190855_960_720.jpg class="sildes"></li>
</ul>

しかし、反応しません。

何かしらの方法があるのであれば、ご教示していただければ幸いです。

ちなみに、参考にしたサイトのURLも貼っておきます（メソッドという見出しの3番目と4番目に記載あり）

参考記事

Answer 1

クリックイベントを指定する要素を以下に変更してはいかがでしょうか？
また、.slidesは場所あっておりますでしょうか？

  $('.slick-prev').on('click',function(){
    $('.sildes').slick('slickNext'); //ここの.slidesは場所あってますか？
  });
  $('.slick-next').on('click',function(){
    $('.sildes').slick('slickPrev');
  });

また、矢印を自分で設定する方法もあります。

  $('.main-line').slick({
    ...省略....,
    prevArrow: '<span class="hoge_prev">&lt;</span>',
    nextArrow: '<span class="hoge_next">&lt;</span>'
  });

でボタンを指定して、.hoge_prevと.hoge_nextを
cssでいじれば、自分で矢印の形をデザインできます。