Streaming live at 10am (PST)

[TUTORIAL] Customize Slider "Dots" individually

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 background property, 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 :slight_smile:

Thank’s for reading :webflow_heart:

4 Likes