質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4347閲覧

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

UKYO9311

総合スコア31

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/07/24 04:35

編集2019/07/26 07:54

前提・実現したいこと

スリックスライダーを使って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

補足

イメージ説明

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答1

0

ベストアンサー

こんにちは

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

afterChange

Arguments: slick, currentSlide
Fires after slide change

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

  • 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 をブラウザで表示させたところです。

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

投稿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

ありがとうございます!!!( ; ; ) ほぼデザイン通りに再現することができました。何とお礼を言えば良いか(>_<) スライダーが時々止まって動かなくなってしまう時があるのですが、読み込みの問題でしょうか?? あと、1週目は正常なのですが、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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問