【slick】複数スライド移動(1枚づつ表示)

Question

24枚の同じ角度で撮った画像をslickを使って回転している風に設定したいのですが、
prev、nextボタンをクリックした際1枚づつの移動ではなく、
1枚づつ表示されている画像をprev、nextボタンの1クリックで3枚スライドするという動きを行いたいのですがオプションを一通り確認しましても該当するものが見当たらず、それだけでは実装難しいのでしょうか？

得意な方、同じような実装をした方、ご存知の方いましたら教えていただけますと大変助かります。

該当のソースコード

<ul class="slide">
  <li><img src="images01.jpg" alt="画像01"></li>
  <li><img src="images01.jpg" alt="画像02"></li>
  <li><img src="images01.jpg" alt="画像03"></li>
  (*04-23省略)
  <li><img src="images01.jpg" alt="画像24"></li>
</ul>

$(function() {
　$('.slide').slick({
　autoplay: false,
　dots: false,
　fade: true,
　speed: 0,
　slidesToScroll: 3,
　arrows: true,
　prevArrow: '<img src="prev.svg" class="slide-arrow">',
　nextArrow: '<img src="next.svg" class="slide-arrow">',
  });
});

Answer 1

nextやprevの動作を発火させるAPIがあるようなので、nextやprevのボタンは独自に用意して、以下のような実装を施せば良いかもしれないです^^

https://kenwheeler.github.io/slick/
Methods参照

$(独自のnextボタン).on('click', () => {
  var delay = 0;
  for (var i = 0; i < 3; i++) {
    setTimeout(()=> {
      $(対象のスライダー).slick('slickNext')
    }, delay)
    delay+=切り替えたいタイミング
  }
})

Comments

[退会済みユーザー]

ご回答ありがとうございます！
こちら試してみたところ、実装を施したボタンをクリックすると、他のボタンも押せなくなり全体の動きが停止してしまいます。
以下の記述に何か問題があるのでしょうか？

<script>
$('.slide_right_btn').on('click', () => {
var delay = 0;
for (var i = 0; 0 < 3; i++) {
setTimeout(()=> {
$('.slide').slick('slickNext')
}, delay)
delay+=500
}
});
</script>

[runnynose]

すみません、for文ミスっておりました^^;
修正しましたので、差分をご確認くださいませ。

あくまでサンプルのコードになりますので、連打対策等は別途必要になると思います！