Auto Play - Clicked Dots Remains active

[georgeneil]

In the Auto Play demo page (https://react-slick.neostack.com/docs/example/auto-play-methods). When we click on a dot, the user is getting a feeling like two dots are active. Why are we having this behaviour ?

[shivamraj]

will be fixing this in my pull request.

[Sergezdv]

this can be fixed with css

.slick-dots li button:focus:before { opacity: 0.25; }
.slick-dots li.slick-active button:focus:before,  .slick-dots li button:hover:before { opacity: 1; }

[grace618]

This problem has not been fixed yet？

[MingRay98]

this can be fixed with css

.slick-dots li button:focus:before { opacity: 0.25; }
.slick-dots li.slick-active button:focus:before,  .slick-dots li button:hover:before { opacity: 1; }

It can't work on android

[sania1801]

Any ideas?

[YudhaSy]

Is there a fix for this yet? or a workaround?

this does not work for me: .slick-dots li button:focus:before { opacity: 0.25; } .slick-dots li.slick-active button:focus:before, .slick-dots li button:hover:before { opacity: 1; }

[Hsu-Linda]

it works for me

.slick-dots li button:before { opacity: 0.25; } .slick-dots li button:focus:before { opacity: 0.25 !important; } .slick-dots li.slick-active button:focus:before { opacity: .75 !important; }

[sergiher]

it works for me

.slick-dots li button:before { opacity: 0.25; } .slick-dots li button:focus:before { opacity: 0.25 !important; } .slick-dots li.slick-active button:focus:before { opacity: .75 !important; }

I had to add

.slick-dots li.slick-active button:before { opacity: .75 !important; }

to make it work (when clicking on a dot). Thank you, anyway

[ngvadait]

You can try .slick-dots li button:before { opacity: 1; color: rgba(0, 0, 0, 0.25); } .slick-dots li.slick-active button:before { color: #000; }

[AshwinNema]

I think this issue is already resolved

[jacobdarvin]

.slick-dots li button:before { opacity: 0.25; } .slick-dots li button:focus:before { opacity: 0.25 !important; } .slick-dots li.slick-active button:focus:before { opacity: 0.75 !important; } .slick-dots li.slick-active button:before { opacity: 0.75 !important; }