複数のslickスライダーを設置し、自動スライドの開始タイミングをずらす

「ええ！？複数設置したslickスライダーのスライド開始タイミングをずらす！？」

「できらぁっ！」

実装

単純にsettimeoutでslick()の実行タイミングを遅らせるだけでは、slick()が実行されていない段階のレイアウト崩れが発生してしまう。

というわけで、「読み込まれてから〇秒後に、自動スライドを開始する」作戦でいきましょう。

こうです。

$('#pickupSlider01').slick({
  /* １つ目のスライダーのオプション */
});
// 0.5秒後に２つ目のスライダーのautoplayを開始
$('#pickupSlider02').on('init', function () {
  var $self = $(this);
  setTimeout(function () {
    $self.slick('slickSetOption', 'autoplay', true, true);
  }, 500);
});
$('#pickupSlider02').slick({
  /* ２つ目のスライダーのオプション */
});
// 1秒後に３つ目のスライダーのautoplayを開始
$('#pickupSlider03').on('init', function () {
  var $self = $(this);
  setTimeout(function () {
    $self.slick('slickSetOption', 'autoplay', true, true);
  }, 1000);
});
$('#pickupSlider03').slick({
  /* ３つ目のスライダーのオプション */
});