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

Webflow Custom Slider Dots

Dereksiu.com.au - Derek Siu Headshot smiling

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>
Copy Code
How Did You Find This Tutorial?
Ready to implement this tutorial?
Get started with Webflow Today!
Webflow Icon Logo
Signup For A Free Webflow Account
Stay updated with my Newsletter!
Have Any Further Questions?
Contact Me
Basic Linkedin Icon
Basic Pinterest Icon
Basiic Maill iicon