Back to tutorials
User / Level Icon
Gear Time Icon
Time Icon

Webflow Custom Slider Dots - 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:


.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);

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
Have Any Further Questions?
Contact Me
Basic Linkedin Icon
Basic Pinterest Icon
Basiic Maill iicon