slickで矢印（arrow）が切り替えに反応しない

お世話になります。
slickで下記内容を実装したところ、メイン画像の矢印（arrow）が反応しなくなってしまいました。

サムネイルをクリックするとメインの画像が切り替わるようにしているのですが、この仕様にプラスしてメインの画像を矢印（arrow）クリックでもメイン画像の切り替えすることは可能でしょうか？

組み合わせのせいで反応がしないのか、記述が足りないのか判りかねてしまいました。
お分かりの方がおりましたら、ご教示頂けると助かります。

何卒宜しくお願いいたします。

html

<div class="pickup__images" id="wrap">

　<div class="pickup__image" id="slider">
	<li class="slide-item">
		<a href="./img/◯◯.jpg" data-lightbox="pickup" data-title="◯◯">
		<img data-lazy="./img/◯◯.jpg" alt="pickup1" class="pickup__image-main1">
		</a>
	</li>

	<li class="slide-item">
		<a href="./img/◯◯.jpg" data-lightbox="pickup" data-title="◯◯">
		<img data-lazy="./img/◯◯.jpg" alt="pickup2" class="pickup__image-main">
		</a>
	</li>
	
	<li class="slide-item">
		<a href="./img/◯◯.jpg" data-lightbox="pickup" data-title="◯◯">
		<img data-lazy="./img/◯◯.jpg" alt="pickup3" class="pickup__image-main">
		</a>
	</li>
　</div>


　	<ul class="pickup__image-selects" id="thumbnail-list">
		<li class="thumbnail-item">
		<img src="./img/◯◯.jpg" alt="pickup1" class="pickup__image-select">
		</li>
		<li class="thumbnail-item">
		<img src="./img/◯◯.jpg" alt="pickup2" class="pickup__image-select">
		</li>
		<li class="thumbnail-item">
		<img src="./img/◯◯.jpg" alt="pickup3" class="pickup__image-select">
		</li>
	</ul>
</div>

jQuery

// スライダー
$(function(){
  var slider = "#slider"; 
  var thumbnailItem = "#thumbnail-list .thumbnail-item"; // サムネイル画像アイテム

  // サムネイル画像アイテムに data-index でindex番号を付与
  $(thumbnailItem).each(function(){
  var index = $(thumbnailItem).index(this);
  $(this).attr("data-index",index);
  });
  
  // スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
  $(slider).on('init',function(slick){
  var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
  $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
  });
  
  //slickスライダー初期化
  $(slider).slick({
  accessibility: true,
  waitForAnimate: false,
  autoplay: false,
  arrows: true,
  fade: true,
  infinite: false
  });
  
  //サムネイル画像アイテムをクリックしたときにスライダー切り替え
  $(thumbnailItem).on('click',function(){
  var index = $(this).attr("data-index");
  $(slider).slick("slickGoTo",index,false);
  });

  //サムネイル画像のカレントを切り替え
  $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
  $(thumbnailItem).each(function(){
  $(this).removeClass("thumbnail-current");
  });
  $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
  });
  });