「slick.js」で最初の1枚目の画像だけすぐに切り替わっちゃうときの対処法

投稿日 2021年5月28日
著者 mako110
カテゴリー WEBのこと

slickをつかっていると、
何故だか一枚目の画像の切り替えだけが早くて、
キャッチコピーなどを入れた画像だと文字が読めないといった現象が起こる時があります。

そういう時はslickのbeforeChangeを使用して、
1枚目のスピードだけを指定してやります。

参考：

tr.you84815.space

上記を参考に、
1周目の1枚目とそれ以外で指定を分ける感じですね。

$(function() {	
  $(".slick").slick({
    arrows: false,
    dots: true,
    autoplay: true,
    autoplaySpeed: 8000,
    speed: 3000,
    fade: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
  });
});
$(".slick").on('beforeChange',function(event, slick, currentSlide, nextSlide){
  if(nextSlide > 0) { 
    $(".slick").slick('slickSetOption', 'autoplaySpeed', 3000, true);
  }
});