slick.jsで画像の切り替わる時間がずれてしまいます。

slick.jsを使用して下記サイトトップのようなアニメーションを実装したいです。

参考にしているサイトの方ではslickは使用していませんが、slickで再現できるのではと考えました。
６つに小分けした画像それぞれにslickを実装しています。

実装はできましたが、参考サイトのように切り替わる時間を少しづつ遅らせようとすると、
リロード時は問題ないのですが、2.3分サイトを開いたままにすると少しづつずれていってしまいます。

slickでこのアニメーションの実装は不可能でしょうか。。。

何か解決策がありましたらあし得ていただきたいです。

コード長くなってしまい申し訳ございません。

html
1<div class="lead-images">
2          <div class="lead-images-container slick01">
3            <img class="lead-images-container__img" src="./assets/img/index/pattern1-1.png">
4            <img class="lead-images-container__img" src="./assets/img/index/pattern2-1.png">
5            <img class="lead-images-container__img" src="./assets/img/index/pattern3-1.png">
6          </div>
7          <div class="lead-images-container slick02">
8            <img class="lead-images-container__img" src="./assets/img/index/pattern1-2.png">
9            <img class="lead-images-container__img" src="./assets/img/index/pattern2-2.png">
10            <img class="lead-images-container__img" src="./assets/img/index/pattern3-2.png">
11          </div>
12          <div class="lead-images-container slick03">
13            <img class="lead-images-container__img" src="./assets/img/index/pattern1-3.png">
14            <img class="lead-images-container__img" src="./assets/img/index/pattern2-3.png">
15            <img class="lead-images-container__img" src="./assets/img/index/pattern3-3.png">
16          </div>
17          <div class="lead-images-container slick04">
18            <img class="lead-images-container__img" src="./assets/img/index/pattern1-4.png">
19            <img class="lead-images-container__img" src="./assets/img/index/pattern2-4.png">
20            <img class="lead-images-container__img" src="./assets/img/index/pattern3-4.png">
21          </div>
22          <div class="lead-images-container slick05">
23            <img class="lead-images-container__img" src="./assets/img/index/pattern1-5.png">
24            <img class="lead-images-container__img" src="./assets/img/index/pattern2-5.png">
25            <img class="lead-images-container__img" src="./assets/img/index/pattern3-5.png">
26          </div>
27          <div class="lead-images-container slick06">
28            <img class="lead-images-container__img" src="./assets/img/index/pattern1-6.png">
29            <img class="lead-images-container__img" src="./assets/img/index/pattern2-6.png">
30            <img class="lead-images-container__img" src="./assets/img/index/pattern3-6.png">
31          </div>
32        </div>

css
1&-images{
2      display: flex;
3      width: 70rem;
4      height: 47rem;
5      position: absolute;
6      right: 0;
7      top: 12rem;
8      z-index: 0;
9      flex-wrap: wrap;
10      justify-content: space-between;
11
12      @include mq(sp1){
13        right: -7rem;
14      }
15      @include mq(sp2){
16        top: 16rem;
17        right: -7rem;
18        height: 29rem;
19        width: 43rem;
20      }
21      &-container{
22        width: 23rem;
23        height: 23rem;
24        margin-bottom: 0.5rem;
25        position: relative;
26
27        @include mq(sp2){
28          width: 14rem;
29          height: 14rem;
30        }
31        &__img{
32          width: 23rem !important;
33          height: 23rem !important;
34
35          @include mq(sp2){
36            width: 14rem !important;
37            height: 14rem !important;
38          }
39        }
40      }
41    }

javascript
1$(function(){
2  setTimeout(function(){
3    $('.slick01').slick({
4      arrows:false,
5      autoplay:true,
6      vertical: true,
7      autoplaySpeed: 3000,
8      speed: 400,
9      autoplay: true,
10      pauseOnFocus: false,
11      pauseOnHover: false
12    });
13  },100);
14  setTimeout(function(){
15    $('.slick02').slick({
16      arrows:false,
17      autoplay:true,
18      vertical: true,
19      autoplaySpeed: 3000,
20      speed: 400,
21      autoplay: true,
22      pauseOnFocus: false,
23      pauseOnHover: false
24    });
25  },200);
26  setTimeout(function(){
27    $('.slick03').slick({
28      arrows:false,
29      autoplay:true,
30      vertical: true,
31      autoplaySpeed: 3000,
32      speed: 400,
33      autoplay: true,
34      pauseOnFocus: false,
35      pauseOnHover: false
36    });
37  },300);
38  setTimeout(function(){
39    $('.slick04').slick({
40      arrows:false,
41      autoplay:true,
42      vertical: true,
43      autoplaySpeed: 3000,
44      speed: 400,
45      autoplay: true,
46      pauseOnFocus: false,
47      pauseOnHover: false
48    });
49  },400);
50  setTimeout(function(){
51    $('.slick05').slick({
52      arrows:false,
53      autoplay:true,
54      vertical: true,
55      autoplaySpeed: 3000,
56      speed: 400,
57      autoplay: true,
58      pauseOnFocus: false,
59      pauseOnHover: false
60    });
61  },500);
62  setTimeout(function(){
63    $('.slick06').slick({
64      arrows:false,
65      autoplay:true,
66      vertical: true,
67      autoplaySpeed: 3000,
68      speed: 400,
69      autoplay: true,
70      pauseOnFocus: false,
71      pauseOnHover: false
72    });
73  },600);
74});