Hello drvanon,
may be it is conflict with any JavaScript.
For better support can we have the URL to check that and provide the better solution to you.
Hello,
I’ve checked the site. when slides toggles the buttons also toggles, there is a css that comes from your theme’s sass file _custom_styles.scss that applies to the button.
that’s why the first button color is #333333. please check that.
Hi,
I think you are referring to:
button::first-child {
background-color: #333333;
}
button [aria-selected=true] button {
background-color: $dark !important;
}
button [aria-selected=false] button {
background-color: $grey !important;
}
The first line is meant to make first button grey in all cases, except when it is active. This was my answer to the problem that the aria-selected on the first button never changes, but it did not resolve the problem. I have now removed the code, but you can see that the problem perists.
Hello,
use this css for first button.
.slick-dots li[aria-selected=”true”] button {
background-color: #b3b3b3 !important;
}
I hope I am not being obnoxious now, but I think the problem is the code that makes the buttons work, not in what describes it’s color.
When I inspect the element that is the first button, I can see that the aria-selected value does not change, but sticks with “true”. This is why I think that changing the css attributes for [aria-selected] has no effect.
I have added your code (sass/custom/_custom_styles.scss line 264-266), but as you can observe, it makes no change.
Hello,
your scss style is having common style :
.slick-dots li[aria-selected=”true”] button {}
that is affected with our plugin.
So, Do not pass the direct css/scss to the div. make sure you can apply parent div to the css so it will not affect with any other css.
try to take parent class in your scss file where background color is conflict.
Hi,
As you said, applying the style to a parent div made the diference, it now works. Thank you very much!
Would mind me asking why exactly this is a problem?
Hello,
as you see there is css
.slick-dots li[aria-selected=”true”] button {}
So, this will apply all the class of div when it is come.
(e.g. our slider has the same class in ‘li’ tag).
and .slick-dots is the class of slick slider js plugin.
So, whenever you want to change the css then apply parent div. why, because if the css is comes with the same class then it will first call the css with parent div css.
So, it will take Parent first then child div.
Thanks for using our plugin.
If you like our plugin and support, please give us rating it will help us. 🙂
