スライダーで直前にクリックしたドットナビの色が消えない

前提・実現したいこと

slick sliderを使用した正常な挙動のスライダー

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

ドットナビを何度か行ったり来たりしているとたまにですが直前にクリックした箇所の色が消えてくれません。
PC2台で確認しましたがどちらでも現象が確認できましたのでPCの問題ではないかと思います。
同様の現象は確認できますでしょうか？
また原因わかる方いらっしゃいましたらご教授お願いいたします。

サンプルサイトでも同じ挙動を確認したのでそのURLを添付致します。
https://webdesignday.jp/samples/p3847/sample01/

使用PC　Windows10
使用ブラウザ　chrome

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

回答1件

ベストアンサー

この問題の原因はcssです。そしてこれは正常な挙動のようです。

まずは解決法から！slick-theme.cssから
.slick-dots li button:focus:beforeを取ってあげてください。

css
1.slick-dots li button:hover:before,
2.slick-dots li button:focus:before // この1行を削除。上のカンマを取るのを忘れないように
3{
4    opacity: 1;
5}

２つのドットが黒くなるのは画像が完全に切り替わっていない状態で、切り替わり先のドット以外をクリックした時です。これはドット(buttonタグ)にfocusされているときのcssで黒くなるようになっているからです。加えて、クリックされたドットのli要素にslick-activeクラスが付与され、付与されたドット(buttonタグ)にも黒くなるcssが適応されています。その為２つ黒くなる事があります。

通常は異動先とクリックでfocusされたドットは同じですから、ドットに２重でcssがかかっているような感じです。
slickは使った事がないのでこの先を聞かれても答えられませんが、何か他の動きの為にbutton:focusにも色を変更するcssを適応してるのかもしれませんね。

投稿2019/12/20 03:55

編集2019/12/20 03:56