何か少しでもヒントを頂けますと嬉しいです。

スライドショーの切り替えについて

静的HTMLにslickを使ってスライドショーを実装しています。
https://teratail.com/questions/202267
↑こちらを参考にさせていただきました。

4枚の画像が切り替わるスライドショーを4つ用意し、
それを更に1つのスライドショーにまとめてユーザーが切り替えられるようにしたいです。

［スライドショー完成までの計画］
1 「プログレスバーと画像前次ボタン付きのスライドショー」(A)を４つ用意する
2 (A)をさらにひとつのスライドショーにまとめ、スライド出来るようにする。

##現在のエラーと分からないこと
・4つ用意したが、二個目以降のスライドショーのプログレスバーが動かない。
・とりあえず形になってほしい気持ちから4つのスライダーを「big-slider」に変えてJSの方に追記したところ、大カオスな状態になった。
・仮に上記が解決されたとしてこの計画では、画像切替ボタンも動いてしまう。操作ボタンは、動かないでほしいのです。

JS
1$('.big-slider').slick({
2    arrows: true,
3    dots: false,
4    speed: 1200,
5    prevArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Prev" class="slide-arrow slick-prev">',
6    nextArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Next" class="slide-arrow slick-next">',
7    adaptiveHeight: true
8}).on('afterChange', function(event, slick, currentSlide) {
9    if (currentSlide === 0)
10        $('.bar').css({width: 0});
11    $('.bar').startBar(currentSlide);
12});

** 該当のソースコード**

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Q202267</title>
6    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
7    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
8    <script src="./js/main.js"></script>
9    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
10    <link rel="stylesheet" type="text/css" href="css/style.css"/>
11</head>
12<body>
13
14<div class="big-slider">
15    <div class="containerA container">
16        <div class="slider">
17            <div>
18                <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=1" />
19            </div>
20            <div>
21                <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=2" />
22            </div>
23            <div>
24                <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=3" />
25            </div>
26            <div>
27                <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=4" />
28            </div>
29        </div>
30
31        <div class="progress-bars">
32            <div class="progress-bar-box"><div class="bar"></div></div>
33            <div class="progress-bar-box"><div class="bar"></div></div>
34            <div class="progress-bar-box"><div class="bar"></div></div>
35            <div class="progress-bar-box"><div class="bar"></div></div>
36        </div>
37    </div>
38
39
40    <div class="containerB container">
41            <div class="slider">
42                <div>
43                    <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=1" />
44                </div>
45                <div>
46                    <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=2" />
47                </div>
48                <div>
49                    <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=3" />
50                </div>
51                <div>
52                    <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=4" />
53                </div>
54            </div>
55
56            <div class="progress-bars">
57                <div class="progress-bar-box"><div class="bar"></div></div>
58                <div class="progress-bar-box"><div class="bar"></div></div>
59                <div class="progress-bar-box"><div class="bar"></div></div>
60                <div class="progress-bar-box"><div class="bar"></div></div>
61            </div>
62        </div>
63
64
65        <div class="containerC container">
66            <div class="slider">
67                <div>
68                    <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=1" />
69                </div>
70                <div>
71                    <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=2" />
72                </div>
73                <div>
74                    <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=3" />
75                </div>
76                <div>
77                    <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=4" />
78                </div>
79            </div>
80
81            <div class="progress-bars">
82                <div class="progress-bar-box"><div class="bar"></div></div>
83                <div class="progress-bar-box"><div class="bar"></div></div>
84                <div class="progress-bar-box"><div class="bar"></div></div>
85                <div class="progress-bar-box"><div class="bar"></div></div>
86            </div>
87        </div>
88
89
90        <div class="containerD container">
91            <div class="slider">
92                <div>
93                    <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=1" />
94                </div>
95                <div>
96                    <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=2" />
97                </div>
98                <div>
99                    <img alt="Alt" src="https://dummyimage.com/600x400/0009ff/fff&text=3" />
100                </div>
101                <div>
102                    <img alt="Alt" src="https://dummyimage.com/600x400/09992d/fff&text=4" />
103                </div>
104            </div>
105
106            <div class="progress-bars">
107                <div class="progress-bar-box"><div class="bar"></div></div>
108                <div class="progress-bar-box"><div class="bar"></div></div>
109                <div class="progress-bar-box"><div class="bar"></div></div>
110                <div class="progress-bar-box"><div class="bar"></div></div>
111            </div>
112        </div>
113
114</div>
115</body>
116</html>

CSS
1/* Slider */
2.container {
3  position: relative;
4}
5
6.slider{
7  width: 55%;
8}
9
10.slick-slide img {
11  display: block;
12  width: 100%;
13  height: 55vh;
14  margin-top: 4px !important;
15}
16
17
18.slick-prev {
19  width: 65px;
20  border: none;
21  border-radius: none;
22  position: absolute;
23  top: 50%;
24  -webkit-transform: translateY(-20%);
25          transform: translateY(-20%);
26  right: -30%;
27  padding: 0.25em 0.5em;
28  z-index: 400;
29}
30
31.slick-next {
32  width: 65px;
33  border: none;
34  border-radius: none;
35  position: absolute;
36  top: 50%;
37  -webkit-transform: translateY(-20%);
38          transform: translateY(-20%);
39  right: -60%;
40  padding: 0.25em 0.5em;
41  z-index: 400;
42}
43
44@media screen and (max-width: 767px) {
45  .slick-next {
46    display: none !important;
47  }
48  .slick-prev {
49    display: none !important;
50  }
51}
52
53.progress-bars {
54  max-width: 55%;
55  position: absolute;
56  top: 100%;
57  left: 0;
58  right: 0;
59  display: flex;
60}
61
62.progress-bar-box {
63  height: 5px;
64  width: 25%;
65}
66
67.progress-bar-box:nth-child(even) {
68  background-color: #aaa;
69}
70
71.progress-bar-box:nth-child(odd) {
72  background-color: #aaa;
73}
74
75.bar {
76  height: 100%;
77  width: 0;
78}
79
80

JS
1$(document).ready(function() {
2
3    const barColors = ['#f00', '#ff0', '#f00','#ff0'];
4
5    $.fn.startBar = function(index) {
6       this
7         .eq(index)
8         .css({ backgroundColor: barColors[index]})
9         .animate({ width: '100%' }, 3000 );
10    }
11
12    $('.slider').slick({
13        autoplay: true,
14        arrows: true,
15        dots: false,
16        speed: 1200,
17        autoplaySpeed: 3000,
18        prevArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Prev" class="slide-arrow slick-prev">',
19        nextArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Next" class="slide-arrow slick-next">',
20        adaptiveHeight: true
21    }).on('afterChange', function(event, slick, currentSlide) {
22        if (currentSlide === 0)
23            $('.bar').css({width: 0});
24        $('.bar').startBar(currentSlide);
25    });
26
27    $('.bar').startBar(0);
28});
29
30
31// $('.big-slider').slick({
32//     arrows: true,
33//     dots: false,
34//     speed: 1200,
35//     prevArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Prev" class="slide-arrow slick-prev">',
36//     nextArrow: '<img src="https://dummyimage.com/100x100/fff/000&text=Next" class="slide-arrow slick-next">',
37//     adaptiveHeight: true
38// }).on('afterChange', function(event, slick, currentSlide) {
39//     if (currentSlide === 0)### ヘディングのテキスト
40//         $('.bar').css({width: 0});
41//     $('.bar').startBar(currentSlide);
42// });
43

環境

PC：Windows
エディタ：VScode

試したこと

デバッグツールで表示されてるエラーとにらめっこしていたのですが、
エラーがなくなっても解決されなかったので、質問させて頂きました。
JS内のcode記載する順番が悪いのだろうかと思い、前後させてみましたが、うまくいきませんでした。
https://webcode-lab.com/topics/blogid/8/
を参考にさせて頂き、「$() 関数」が競合云々という問題じゃないということが分かりました。

［現在…］
アドバイス頂いた「任意で切り替え」を自分なりに解釈し、そもそもこれをslickでやろうとしていること自体が問題なのではないか？と思いはじめて来たのですが、皆様のご意見を頂けますと幸いです。

もし、必要な情報がありましたら、追記させていただきます。
宜しくお願いします。