So I’ve built a custom slider with a bit of custom code, especially for the slider dots. However I’m kinda stuck on what do for multiple custom sliders on the same page since all the slider dots have the same class.
Is there a way to target slider dots with with a specific parent class?
Here is a screenshot of the two sliders:
Here is the code I’m using to affect the top slider:
<style>
.w-slider-dot {
background: #c4c5c5;
font-size: 10px;
margin: 8px;
}
.w-slider-dot.w-active {
background: teal;
font-size: 13px;
margin: 8px;
}
/* Extra small devices (phones, 500px and down) */
@media only screen and (max-width: 500px) {
.w-slider-dot {
margin: 5px;
}
.w-slider-dot.w-active {
margin: 5px;
}
}
</style>
Thanks so much guys.
Here is my site Read-Only:
https://preview.webflow.com/preview/test-031ec1-9bb3184c8b09ab1eab523e11f98?utm_medium=preview_link&utm_source=designer&utm_content=test-031ec1-9bb3184c8b09ab1eab523e11f98&preview=a6fd0387e48fec698dc378be5c14735a&workflow=preview