Tutorial
If you want to style the navigation “dots” in a slider individually based on which slide is currently active, here’s how!
This can be useful (for example) if one of your slides has a background color, that doesn’t go well with the style of the dots.
In this example, the “special snowflake” dot is the very first slide, if your “snowflake” is on concurrent slides, you can ignore step 1!
Step 1
In a custom-code-block on the page with the slider OR in the custom-code area inside the page’s settings
add these css rules:
show css
<style>
.w-slider-dot {
background: red;
}
.w-slider-dot.w-active {
background: red;
}
</style>
Change the color according to your desire, this will apply to the initial (default) slide! You can also set additional styling here!
Step 2
We will need to detect when the user (or if slider is automatic) changes slides. For this we need some JS!
Place the following code in the before </body> custom code section in the page’s settings
show Javascript
<script>
$(document).ready(function () {
// create list of all dots
const dotsList = document.getElementsByClassName('w-slider-dot');
// select the special-snowflake dot
const targetNode = dotsList[0];
// make the observer listen only to attribute changes
const config = { attributes: true };
// expression with all the logic
const callback = function (mutationsList, observer) {
for (let mutation of mutationsList) {
// scope oberver on class- changes only
if (mutation.attributeName === 'class') {
// check if special-snowflake is active
if (dotsList[0].classList.contains('w-active')) {
// iterate through all dots and give them the special color
for (let i = 0; i < dotsList.length; i++) {
dotsList[i].style.background = 'red';
}
} else {
// iterate through all dots and give them the default color
for (let i = 0; i < dotsList.length; i++) {
dotsList[i].style.background = 'white';
}
}
}
}
};
// leave this alone :)
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
});
</script>
You need to change the colors here too! I tried to document the code as best as I could, feel free to ask if things are unclear!
Considerations
- This snippet only alters the
backgroundproperty, if you want more than that, you need to add them to the css AND js! - Code can be optimized, my goal was readability and I may not be the greatest coder!
- Suggestions and improvements are super welcome!
Requirements
- custom code (paid feature!)
I hope someone might find this useful, as those dots are not really customize-able by default! You have some super slick styling? Post your example for others to enjoy 
Thank’s for reading 