react-slick
react-slick copied to clipboard
2 dots are highlighted
reproduce here: https://react-slick.neostack.com/
- Use mobile phone or toggle device toolbar in inspect mode
- click on random dot, then slide to side
- 2 dots are highlighted
Notes: "old" dot will have opacity 1 (this should be 0.25) "new" dot will have opacity 0.75 (normal)
I had the same issue and I had to override the CSS to address this issue. Posting here in case it helps your problem.
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 0.25;
color: black;
}
li.slick-active button:hover:before, li.slick-active button:focus:before {
opacity: 1;
color: black;
}