Back to tutorials
User / Level Icon
Intermediate
Gear Time Icon
Webflow
Time Icon
7
 Minutes

Webflow Custom Slider Dots

Derek Siu Author Headshot

Taught by:

Derek Siu

In this video, I explain how Webflow slider dots work (natively) and how we can use custom code to style the dots any way you would like. Please note a paid site plan or Webflow workspace plan will be needed in order to use the embed feature.

See Custom Code Used Below:

<style>

.w-slider-dot {
   width: 20px;
   height: 20px;
   background-color: #(add hexacode);
}

.w-slider-dot.w-active {
   background-color: #(add hexacode);
   border-radius: (add px or just remove);
}

</style>
How Did You Find This Tutorial?
Ready to implement this tutorial?
Get started with Webflow Today!
Signup For A Free Webflow Account
Have Any Further Questions?
Contact Me
Derek Siu Teaching Code Weblow