スリックスライダーのdotsをプログレスバーにしたい。

前提・実現したいこと

スリックスライダーを使ってTOPページを実装しているのですが、dots部分をプログレスバーに変更したいです。
イメージはこんな感じです。

01のバーが100%になったら画像が切り替わり、02のバーがスタートします。

現在はこのような感じになっていて、スライダーに合わせて色も変わります。

このサイトを参考に作っています。
https://peaceday.jp/2019/

発生している問題・エラーメッセージ

スライダーは正常に動いていて、エラーは出ていません。

該当のソースコード

html
1<div class="slider">
2   <div>
3
4	 中略
5
6	 <img alt="Alt" src="images/top_kv1-1.jpg" />
7	 </div>
8	 <div>
9
10	 中略
11
12	 <img alt="Alt" src="images/top_kv1-1.jpg" />
13	 </div>
14	 <div>
15
16	 中略
17
18	 <img alt="Alt" src="images/top_kv1-1.jpg" />
19	 </div>
20	 <div>
21
22	 中略
23
24	 <img alt="Alt" src="images/top_kv1-1.jpg" />
25   </div>
26</div>

css
1/* Slider */
2.slider-wrapper{
3	position: relative;
4    overflow: hidden;
5    width: 100%;
6    
7  }
8  
9  
10  .slick-list {
11	position: relative;
12	overflow: hidden;
13	display: block;
14	margin: 0;
15	padding: 0;
16  }
17  
18  .slick-list:focus {
19	outline: none;
20  }
21  
22  .slick-list.dragging {
23	cursor: pointer;
24	cursor: hand;
25  }
26  
27  .slick-slider .slick-list,
28  .slick-track,
29  .slick-slide,
30  .slick-slide img {
31    height: 100vh;
32    object-fit: cover;
33  }
34  
35  .slick-track {
36	position: relative;
37	left: 0;
38	top: 0;
39	display: block;
40	zoom: 1;
41  }
42  
43  .slick-track:before,
44  .slick-track:after {
45	content: "";
46	display: table;
47  }
48  
49  .slick-track:after {
50	clear: both;
51  }
52  
53  .slick-loading .slick-track {
54	visibility: hidden;
55  }
56  
57  .slick-slide {
58	float: left;
59	height: 100%;
60	min-height: 1px;
61	display: none;
62  }
63  
64  .slick-slide img {
65    width: 100%;
66    height: 100vh;
67    margin-top: 82px;
68  }
69  
70  .slick-slide.dragging img {
71    pointer-events: none;
72    width: 100%;
73    height: 100vh;
74  }
75  
76  .slick-initialized .slick-slide {
77	display: block;
78  }
79  
80  .slick-loading .slick-slide {
81	visibility: hidden;
82  }
83  
84  .slick-vertical .slick-slide {
85	display: block;
86	height: auto;
87	border: 1px solid transparent;
88  }
89  
90  .slick-slide > .slick-slider-img {
91	position: relative;
92	display: block;
93	width: 100%;
94    height: 100vh;
95  }
96  
97  .slick-slide .image {
98    /*height: 180px;*/
99    height: 100vh;
100    width: 100%;
101    margin: 0 auto;
102  }
103  
104  .slick-slide img {
105    display: block;
106    width: 100%;
107    height: 100vh;
108  }
109  
110  .slick-slide img.slick-loading {
111	display: none;
112  }
113  
114  
115  .slick-prev{
116    width: 65px;
117	border: none;
118	border-radius: none;
119	position: absolute;
120	top: 50%;
121	transform: translateY(-20%);
122	left: 115px;
123	padding: 0.25em 0.5em;
124	z-index: 400;
125  }
126  
127  .slick-next{
128    width: 65px;
129	border: none;
130	border-radius: none;
131	position: absolute;
132	top: 50%;
133	transform: translateY(-20%);
134	right: 115px;
135	padding: 0.25em 0.5em;
136	z-index: 400;
137  }
138
139
140 
141
142
143
144
145
146@media screen and (max-width: 767px) {
147
148    .slick-slide img{
149        margin-top: 62px;
150    }
151
152    .slick-next{
153        display: none!important;
154        }
155
156    .slick-prev{
157        display: none!important;
158        }
159    }
160
161
162
163
164
165
166
167    
168  .progress-bars {
169      position: absolute;
170      top: 80%;
171      left: 0;
172      right: 0;
173      overflow: hidden;
174      width: 100%;
175      max-width: 1200px;
176      margin: 0 auto;
177      display: flex;
178      padding-bottom: 10px;
179  }
180  
181  .progress-bar-box {
182      height: 2px;
183      width: 25%;
184      margin: 10px;
185      font-size: 1.2rem;
186      font-weight: bold;
187
188      span{
189        display: block!important;
190        margin-top: 10px;
191      }
192      
193  }
194
195  .progress-bar-box:nth-child(even) {
196    background-color: #aaa;
197}
198
199.progress-bar-box:nth-child(odd) {
200    background-color: #aaa;
201}
202
203  
204  .bar {
205      height: 100%;
206      width: 0px;
207  }
208

js
1//
2//   Slider   ------------------------------
3//
4
5
6$(document).ready(function() {
7
8  const barColors = ['#fff', '#fff', '#fff','#fff'];
9
10  $.fn.startBar = function(index) {
11      this
12          .eq(index)
13          .css({ backgroundColor: barColors[index]})
14          .animate({ width: '100%' }, 3400 );
15  }
16
17  $('.slider').slick({
18      autoplay: true,
19      arrows: true,
20      dots: false,
21      speed: 800,
22      autoplaySpeed: 3000,
23      prevArrow: '<img src="images/slick-prev.svg" class="slide-arrow slick-prev">',
24      nextArrow: '<img src="images/slick-next.svg" class="slide-arrow slick-next">',
25      adaptiveHeight: true
26  }).on('afterChange', function(event, slick, currentSlide) {
27    if (currentSlide === 0)
28        $('.bar').startBar(currentSlide);
29        $('.bar').css({width: 0}).startBar(currentSlide);
30        $('.bar').css({width: 0});
31  });
32
33  $('.bar').startBar(0);
34
35});
36

補足

二週目からこのようになってしまいます。

m.ts10806

2019/07/24 05:38

https://teratail.com/questions/201906 ↑この質問とはどう違うのでしょうか？同じ質問なのであれば、質問は編集できますし編集したりすることで「アクティブ」タブにあがってくるので新しい質問を立てる必要はないと思います

UKYO9311

2019/07/24 05:55

ご指摘ありがとうございます。。。おっしゃる通りだと思います。もう前の質問は古くなってしまったと思い新しく質問を立ててしまいました。。。

m.ts10806

2019/07/24 05:56

どちらか質問の削除依頼を出しておくと良いです。

UKYO9311

2019/07/24 06:02

ありがとうございます！！今、前回の質問の削除依頼を出しました。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

slick の設定パラメータの中にある、以下を使うとできるのではと思います。

afterChange

Arguments: slick, currentSlide
Fires after slide change

試作してみました。作成したのは、以下の４点

index.html
main.js
style.css
extra.css

です。それぞれのソースコードを以下に挙げます。

index.html

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="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="style.css"/>
11    <link rel="stylesheet" type="text/css" href="extra.css"/>
12</head>
13<body>
14
15<div class="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</body>
41</html>

main.js

以下のように、 afterChange イベントに対するコールバックを設定して、その中でプログレスバーの塗りつぶしアニメーションを開始させています。

javascript
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

style.css

ご質問にあるCSSをコピペして作成したCSSファイルです。

extra.css

動作確認用に新たに追加したスタイルです。

CSS
1.container {
2	position: relative;
3}
4
5.progress-bars {
6	position: absolute;
7	top: 90%;
8	overflow: hidden;
9	width: 100%;
10	margin-top: 20px;
11	margin-bottom: 20px;
12}
13
14.progress-bar-box {
15	float: left;
16	height: 32px;
17	width: 25%;
18}
19
20.bar {
21	height: 100%;
22	width: 0px;
23}
24
25img {
26	margin-top: 4px !important;
27}

以下の動画は、上記の index.html をブラウザで表示させたところです。

Q202267 movie： https://youtu.be/9lB0DwWZ59o

以上、参考になれば幸いです。

投稿2019/07/25 13:48

編集2019/07/25 13:54

jun68ykt

総合スコア9058

UKYO9311

2019/07/26 02:14

回答ありがとうございます！！ご丁寧に動画まで用意してもらいまして...とても参考になります！（ ; ; ）すみません大変恐縮なのですが、アクティブ状態のものだけ表示してそれ以外を非表示にするにはどうしたらいいのでしょうか？？調べながらカスタマイズしたのですがどうもできなくて。。。 https://peaceday.jp/2019/ このサイトを参考にしていたのですがどうしても再現できなくてですね。。。

jun68ykt

2019/07/26 04:15

こんにちはどういたしまして。 > アクティブ状態のものだけ表示してそれ以外を非表示にするにはどうしたらいいのでしょうか？？とのことですが、回答に挙げたコードに、「進捗しているバー以外のバーは非アクティブな色にする」という修正をしたものを、以下に上げました。 https://github.com/jun68ykt/q202267 上記の回答に挙げたコードから、「進捗しているバー以外のバーは非アクティブな色にする」ための修正は以下です。 https://git.io/fjyLr この修正によって、進捗しているバー以外のバーは、灰色になります。灰色も必要ではなく、透明になって欲しいのであれば、extra.css　にある、以下のスタイルをコメントアウトすればよいです。 .progress-bar-box:nth-child(even) { background-color: #888; } .progress-bar-box:nth-child(odd) { background-color: #aaa; }

UKYO9311

2019/07/26 07:51

ありがとうございます！！！（ ; ; ）ほぼデザイン通りに再現することができました。何とお礼を言えば良いか(>_<) スライダーが時々止まって動かなくなってしまう時があるのですが、読み込みの問題でしょうか？？あと、１週目は正常なのですが、2週目から01が終わった後01が消えずに02が始まってしまいます。03が始まると01と02どっちも消えるのですが。。。言葉ではわかりにくいため上に現在のコードと画像を貼ります。なんどもすみません。。。どっちにしてもこれでラストにして、ベストアンサーとさせていただきます。

jun68ykt

2019/07/26 11:41

どういたしまして。 > ほぼデザイン通りに再現することができました。との件、よかったです ???? > スライダーが時々止まって動かなくなってしまう時があるのですが、読み込みの問題でしょうか？？悩ましいですね。「こういう条件があると、止まってしまう」というような、不具合のおこる前提となる状況をどうにか少しでも特定して、また別の質問として投稿されるとよいかもしれません。 > 言葉ではわかりにくいため上に現在のコードと画像を貼ります。現在のコードと画像を拝見しまして、ここが怪しいのでは？と思う点として、私が動作確認したコードとの相違点を以下に2つ挙げます。 (1) バーを animate するときに与える時間現在のコードのほうを見ると　　.animate({ width: '100%' }, 3400 ); となっていて、 3400 ミリ秒を指定していますが、私の作成したコードでは 3000ミリ秒にしており、これは slick に与える設定の　　autoplaySpeed: 3000, に合わせる意図でした。この autoplaySpeed のミリ秒数と、animate　の第二引数で与えるミリ秒数とが違っていると、なんとなく、だんだんズレていくのでは？と思ったりします。（UKYO9311さんの検証によって、何らか妥当な理由により、400ミリ秒差をつけているのであれば問題ありません。） (2) on afterChange に与えるコールバックご質問にある、現在のコードでは .on('afterChange', function(event, slick, currentSlide) { if (currentSlide === 0) $('.bar').startBar(currentSlide); $('.bar').css({width: 0}).startBar(currentSlide); $('.bar').css({width: 0}); }); となっていますが、私の修正後のものは https://github.com/jun68ykt/q202267/blob/master/main.js#L21-L23 にあるとおり、 .on('afterChange', function(event, slick, currentSlide) { $('.bar').css({width: 0}).startBar(currentSlide); }); というものでした。以上です。私の回答の要点は以下の二つです。・afterChange　にコールバックを設定すれば、スライドの入れ替わりが完了したことを契機に何かを実行できる。・上記の「何かを実行」として、 autoplaySpeed に設定した時間と同じ時間でアニメーションを開始すれば、スライドの動きとそのアニメーションを連動させることができる。さらにこれらに加えて、・ afterChange　とは逆に、スライドが動き始めるイベントも beforeChange として受け取れるので、これらを組み合わせれば、様々な表現が可能と思います。良いものが出来るといいですね。Good luck をお祈り申し上げます。

UKYO9311

2019/07/27 08:36

何度もご丁寧なご回答、本当に感謝しかありません（ ; ; ）修正してみたところ正常に動作しました！！途中で止まってしまったりしていたのもこの記述ミスだったみたいです。。。たくさん勉強もさせてもらいました！本当にありがとうございました！！！(>_<)

jun68ykt

2019/07/27 13:31

解決したようですね。よかったです ????

行動規範の内容に同意します