Customize the design of dot sliders in Webflow

1. Add an embed element and add this code

Tips: Adding your code to an embed element rather than adding it to your page settings allows you to see the result directly in Webflow without having to publish your site. Super handy for iterating on your CSS design without wasting time. Only visible for HTML/CSS code.

 <style>
.w-slider-dot {
background: #E0E1DD;
width:12px;
height:12px;
border-radius:24px;
}
.w-slider-dot.w-active {
background: #009BA6;
width:24px;
}
</style>

‍

2. Add the style you want

Default design

colour : Enter your desired color instead of the hexadecimal code #E0E1DD

Design: Enter the desired width, height, and radius by changing the width, height, and border-radius.

‍

Active design

Same as for the default game but in the active state selected by adding “w-active” To the class “.w-slider-dot”.

3. Publish and you're done

Bonus Tips

To optimize the design of your dot sliders on the mobile version, you can use a media query to target mobile-sized screens.

The code below to add in your tag <style>

 <style>
/* Media query pour les écrans de taille mobile */
@media (max-width: 768px) {
    .w-slider-dot {
        width: 44px;
    }
    
    .w-slider-dot.w-active {
        /* Ajoutez ici les modifications spécifiques pour la version active mobile */
        /* Par exemple, si vous souhaitez changer la couleur d'arrière-plan : */
        background: #FDBC71; 
    }
}
</style>