Connaître les atouts & dépasser les limites du slider natif de Webflow

Quels sont les avantages des sliders natifs dans Webflow

Les sliders natifs de Webflow sont faciles à ajouter et à configurer grâce à l'interface glisser-déposer. On peut relativement personnaliser le slider visuelle via l'éditeur visuel sans coder et le configurer pour qu'il soit responsive.

Utiliser le slider natif dans Webflow permet de gagner du temps cependant cette solution a des limites.

Les limites de style du slider natif dans Webflow

Les paramètres du slider par défaut nous offre quelques options :

Ajouter facilement des slides
Visualiser facilement les slides en naviguant de l'une à l'autre
Animer le slider : choisir l'animation et le temps de la transition
configurer les interactions (défilement en boucle infinie, automatique, autoriser ou non le swipe
Styliser les éléments d'interaction : flèches et bullets

Ce set d'option est déjà une bonne base et selon le budget du client s'avérera largement suffisant pour présenter des témoignages, des chiffres clés, des services etc.

Quelques exemples de CSS pour personnaliser le slider de Webflow par défaut

Il est possible avec un peu de code de changer la couleur des bullets de pagination. Selon la couleur d'arrière plan, les couleurs par défaut noir ou blanc ne vont pas s'accorder avec la charte graphique, ou manqueront de visibilité. Pour créer un site cohérent et accessible il faut donner un ID au slider que l'on souhaite modifier.

Sélectionner dans le slider dan le panel Navigator
Dans les settings du slider compléter son ID : ici "custom-slider"
Si vous avez plusieurs sliders différents, il faudra alors créer un Id par slider

Ajouter les propriété CSS pour personnaliser vos bullets de pagination

<style>
  /* Style sur mesure pour ton custom-slider */
  #custom-slider .w-slider-nav .w-slider-dot {
    background-color: #a28c4e !important; /* Change la couleur des bullets de pagination */
    opacity: 0.5; /* Opacité réduite pour les bullets de pagination non actifs */
    transition: background-color 0.3s ease, opacity 0.3s ease;
  }

  #custom-slider .w-slider-nav .w-slider-dot.w-active {
    background-color: #A28C4E !important; /* Change la couleur des bullets de pagination */
    opacity: 1; /* Opacité à 100% pour les bullets de pagination actifs  */
  }
</style>

‍

Finsweet partage une solution no-code, avec les attributs pour personnaliser à 100% les puces de ton slider : tu peux définir tout type d'élément graphique pour remplacer la puce impersonnelle !

Une image, un svg voire une div block, pour remplacer les puces natives Webflow. Tout le process à suivre sur la page Custom Slider Dots

Ajouter les propriété CSS pour personnaliser les flèches

<style>
  /* Style sur mesure pour ton custom-slider */
#custom-slider .w-slider-arrow-left, 
#custom-slider .w-slider-arrow-right {
  background-color: #FFFFFF; /* Change la couleur des flèches */
  border-radius: 50%; /* Rend les flèches circulaires */
  width: 40px; /* Largeur des flèches */
  height: 40px; /* Hauteur des flèches */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease; /* Ajoute une transition pour la couleur de fond */
}

#custom-slider .w-slider-arrow-left:hover, 
#custom-slider .w-slider-arrow-right:hover {
  background-color: #000000; /* Change la couleur de fond au survol */
}

</style>

Ajouter les propriété CSS pour personnaliser les images ou le contenu des slides

<style>
  /* Style sur mesure pour ton custom-slider */
#custom-slider .w-slide {
  border-radius: 10px; /* Arrondit les coins des slides */
  overflow: hidden; /* Masque le contenu qui dépasse les bordures */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre portée */
}

#custom-slider .w-slide img {
  width: 100%; /* Assure que les images remplissent complètement le slide */
  height: auto; /* Maintient le ratio d'aspect des images */
  transition: transform 0.3s ease; /* Ajoute une transition pour l'effet de zoom */
}

#custom-slider .w-slide:hover img {
  transform: scale(1.05); /* Zoom léger au survol */
}

</style>

Les limites techniques du slider natif dans Webflow

Une autre limite qui peut être contournée : le slider par défaut ne permet de le lier au contenu dynamique d'une collection.

L'objectif est de faciliter la mise à jour du site pour le client : en créant une nouvelle collection pour les témoignages par exemple, le client pourra facilement enrichir ses preuves sociales. Pas besoin de passer par le Designer de Webflow : il aura juste à copier/coller le texte.

Finsweet a développé une solution pour alimenter le slider natif avec le contenu d'une collection ! En deux étapes, vous pouvez associer votre slider à une collection grâce aux instructions de la page Attributes de finsweet.

On retrouve l emême process, un code JS à ajouter dans la partie Head de votre page puis cibler les éléments Slider et List en leur donnant des custom attributes.

Créer des sliders sur-mesure

Il existe plusieurs bibliothèques populaires pour créer des sliders sur des sites web. Voici quelques-unes des plus utilisées et leurs principales caractéristiques :