特定のクラスがついた際に指定の時間だけクラスを追加。

Question

カルーセルslick sliderを使っていまして、表示される画像にはクラスslick-activeが付きます。
カルーセルが切り替わると同時に、クラスが切り替わっているようなのですが、
slick-activeがついた際に、8秒だけクラスactiveを追加するにはどうしたら良いでしょうか。
8秒後には、クラスactiveは取れるようなJSにしたいです。

Comments

[kei344]

「8秒だけ」「2秒後」どっちですか？

[shingosuchin]

すみません、8秒です。

Answer 1

遅延でremoveClassする

.active{background-Color:red};

$(function(){
  $('#btn').on('click',function(){
    $('#hoge').addClass('active').delay(1000).queue(function() {
      $(this).removeClass('active');
    });
  });
});

<div id="hoge">test</div>
<input type="button" id="btn" value="btn">

Answer 2

「afterChange」イベントで何番目が表示されているかを確認して、setTimeoutでクラスを外せばいけると思います。

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/#settings

【slickを使ったスライドショーのカスタマイズ例3つ。 | ネクストページブログ】
http://nxpg.net/blog/?p=8869

【数秒後に処理を遅らせて実行するsetTimeout()とjQueryのqueue()の扱い方 -『javascript』 – webmanab.html／ウェブまなぶ】
https://webmanab-html.com/tip/javascript-settimeout-jquery-queue/