サムネイル付きのスライダーの動作

Question

WebページのTOPページにスライダーを設置したく
こちらのページを参考に作成したのですが、
https://coco-factory.jp/ugokuweb/move01/6-2-5/

メイン画像スライダー、サムネイル画像４枚で設定し、
メイン画像の矢印をクリックしていくと最終画像で真っ白になってしまいます。

御教授ください。よろしくお願いいたします。

<div id="topslider">
    <ul class="gallery">
      <li><img src="./common/img/top/topslider01.png" alt=""></li>
      <li><img src="./common/img/top/topslider02.png" alt=""></li>
      <li><img src="./common/img/top/topslider03.png" alt=""></li>
<li><img src="./common/img/top/topslider04.png" alt=""></li>
    </ul>
    <ul class="choice-btn">
      <li><img src="./common/img/top/topslider01.png" alt=""></li>
      <li><img src="./common/img/top/topslider02.png" alt=""></li>
      <li><img src="./common/img/top/topslider03.png" alt=""></li>
	<li><img src="./common/img/top/topslider04.png" alt=""></li>
    </ul>
	</div>```

```ja
//上部画像の設定
$('.gallery').slick({
	infinite: true, //スライドをループさせるかどうか。初期値はtrue。
	fade: true, //フェードの有効化
	arrows: true,//左右の矢印あり
	prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
	nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
	asNavFor: '.choice-btn', //連動させるサムネイルのクラス名
});

//選択画像の設定
$('.choice-btn').slick({
	infinite: true, //スライドをループさせるかどうか。初期値はtrue。
	slidesToShow: 4, //表示させるスライドの数
	focusOnSelect: true, //フォーカスの有効化
	asNavFor: '.gallery', //連動させるスライドショーのクラス名
});```

よろしくお願いいたします。
	

Answer 1

　slidesToShowの数以下のスライドの場合に、本来不要なスクロールを無理やり適用しているのでその現象が起きてしまうようです。

　ですので、解決方法としては、画像の枚数を4よりも増やすか、slidesToShowを4より小さくするかでしょう。

　あるいは、そもそもサムネイルのスクロールが不要であるならばasNavFor: '.choice-btn'を削除してしまってもいいと思います。