Personnaliser le design des sliders dots dans Webflow
1. Ajoutez un élément embed et ajouter ce code
| Propriété CSS | Sélecteur | Description |
|---|---|---|
| background | w-slider-dot | Couleur du dot inactif |
| background | w-slider-dot.w-active | Couleur du dot actif |
| width / height | w-slider-dot | Taille du dot |
| border-radius | w-slider-dot | Forme (24px = rond, 0 = carré) |
Tips de l'agence Webflow Gemeos : Ajouter votre code dans un élément embed plutôt que l'ajouter dans les paramètres de votre page vous permet de voir le résultat directement dans Webflow sans avoir à publier votre site. Super pratique pour itérer sur votre design CSS sans perdre de temps. Visible uniquement pour le code HTML/CSS.
2. Ajoutez le style que vous voulez
Design par défaut
Couleur : Renseignez votre couleur souhaitée à la place du code hexadécimal #E0E1DD
Design : Renseignez la largeur, la hauteur et le radius souhaitées en modifiant la width, la height et le border-radius.
Design actif
Même chose que pour la partie par défaut mais dans l'état actif sélectionné en ajoutant "w-active" à la class ".w-slider-dot".
3. Publiez et c'est gagné
Bonus Tips
Pour optimiser le design de vos sliders dot sur la version mobile, vous pouvez utiliser une requête média (media query) pour cibler les écrans de taille mobile.
Le code ci-dessous à ajouter dans votre balise <style>
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
