slick.js レスポンシブ表示が1枚目から表示されません。

Question

前提・実現したいこと、発生している問題・エラーメッセージ

js初心者です。m(_ _)m
slick.js
設置画像は5枚で、PCの場合5枚表示（スライドなし）、スマホの場合3枚表示に設定したのですが、スマホだとロード時3枚目から表示されてしまいます。
これを1枚目から表示させたい。

アドバイスいただけると大変助かります。
どうぞよろしくお願いいたします。

該当のソースコード

<ul id="main_top_slider">
	<li class="slick-slide"><a href=""><img src="1枚目画像" alt=""></a></li>
	<li class="slick-slide"><a href=""><img src="2枚目画像" alt=""></a></li>
	<li class="slick-slide"><a href=""><img src="3枚目画像" alt=""></a></li>
	<li class="slick-slide"><a href=""><img src="4枚目画像" alt=""></a></li>
	<li class="slick-slide"><a href=""><img src="5枚目画像" alt=""></a></li>	
</ul>

<script>
$(function() {
	$('#main_top_slider').slick({
		infinite: true,
		dots: false,
		autoplay: false,
		fade: false,
		slidesToShow:5,
		slidesToScroll:5,
		arrows: true,
		responsive:[
			{
				breakpoint: 768,
				settings:{
					slidesToShow:3,
					slidesToScroll:3,
				}
			}
		]
	});
});
</script>

試したこと

上記のjsの記述を変更せずに、設定画像を6枚にするとスマホでも1枚目から表示されます。
設定画像を4枚にするとスマホでは2枚目から表示されます。

補足情報（FW/ツールのバージョンなど）

slick-1.8.1

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown

[m.ts10806]

data-lazy指定している割にlazyLoadの設定が無いような・・？

[matsuhisa]

ご指摘ありがとうございます。
data-lazyこちら間違えておりました。m(_ _)m
修正いたしました。

[m.ts10806]

全然関係なさそうですがbreakpointは769ではなく768のような気がします。
slickではそのように設定している記事を幾つか見ましたし、公式の「Center Mode」の項を見ると768になってます。

[kenreta]

勘ですけど、slidesToShow: 3, slidesToScroll: 3 (表示数3枚で3枚分スライドする)に対し、画像が5枚なので中途半端な挙動になるのではないでしょうか。たとえば画像が6枚あるならば思った通りの挙動になるか試してみてください。

[matsuhisa]

mts10806様
ご指摘ありがとうございます。
breakpointを768に変更しました。

[matsuhisa]

kenreta様
コメントありがとうございます。
［試したこと］に記載させていただいたのですが、画像6枚だとうまくいきます。
4枚だとうまくいきませんでした。
おっしゃる通り、中途半端な（割り切れない）数字が原因とは思うのですが、画像の枚数は5枚で固定なのでなんとかこの設定でうまく表示させれないかと思いご質問させていただきました。
説明不足しており申し訳ございません。

Answer 1

3枚表示で、1枚ずつスライドする
というのではダメでしょうか？

{
    breakpoint: 769,
    settings:{
        slidesToShow:3,
        slidesToScroll:1, //3から1に変更
    }
}

Comments

[kenreta]

http://kenwheeler.github.io/slick/
今、公式ページ見たんですが、
画像6枚に対して4枚スライドを行っているデモがあるので、
5枚の3枚スライドでも調整してくれそうですね...
となると、他に原因がありそうです。
勘で答えてしまって申し訳ないです。

[matsuhisa]

ご回答ありがとうございます。
slidesToScroll:1, //3から1に変更
こちらならうまく表示されるのですが、3枚ずつスライド（画像が5枚なのでslidesToScroll:2,でも構わないのですが、これでもうまく表示されませんでした。）が希望です。