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

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

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

参考:

上記を参考に、
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);
  }
});

こんな感じで動くんじゃないでしょうか。
お困りの方、是非お試しください。
それでは。

役に立った 1

役に立ったボタン設置してみました。是非押していってくださいm(__)m(2020年4月設置)

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。