Masquer Navigation d'un CMS slider si 1 diapositive Webflow

Tutoriel
July 8, 2022
3 min
Webflow tuto avec icône Digidop
Key points

Si vous utilisez un CMS slider dans votre projet Webflow et que vous souhaitez cacher (hide) la navigation du slider (slider dots) quand il n'y a qu'un seul élément visible (une seule diapositive), ce tutoriel est fait pour vous.

Étape 1 : Paramétrer son CMS slider

Si cela n'est pas déjà fait, voici la documentation de Finsweet avec des attributs pour ajouter un CMS slider dans votre projet Webflow.

Attention, quand vous paramétrez votre CMS slider, il n'est pas directement visible depuis l'éditeur, ni même le Designer. Il faut publier votre projet pour que cela fonctionne.

Il sera également nécessaire de supprimer la deuxième slide (Slide 2) de l'élément "Slider".

Étape 2 : Designer sa Slide Nav

Après avoir insérer un CMS slider, vous pouvez customiser les points de la navigation du slider en personnalisant le code css suivant :

<style>
.w-slider-dot {
  width : 12px;
  height : 12px;
  background: #8E85B6;
  border: 1.2px solid rgba(0, 0, 255, 0);
  border-radius: 50%;
}
    
.w-slider-dot.w-active {
  background: #4F43DF;
  border: 1.2px solid #8E85B6;
}
</style>

Étape 3 : Ajouter un attribute à sa Slide Nav

Après l'avoir personnalisé votre navigation, vous allez devoir ajouté un attribute à votre élément Slide Nav.

Le "Name" sera : data-slider

La "Value" sera : item

attribute pour hide slide nav dot si 1 seule diapositive dans webflow

Étape 4 : Ajouter du code JavaScript à sa page

Après avoir ajouté les attributes, vous allez devoir insérer le code suivant dans le code personnalisé (custom code) de votre page : dans "Before <!-- fs-richtext-ignore --></body> tag".

<script>
document.addEventListener("DOMContentLoaded", updateSliders);

function updateSliders(){
  setTimeout(function(){
    var sliders = document.querySelectorAll('[data-slider]');
    sliders.forEach(function(item){
      var slideCount = item.children.length;
        if (slideCount === 1){
          item.style.display = "none";
      }
    })
  }, 1000);
}
</script>
code javascript pour hide slide nav dot si 1 seule diapositive dans webflow

Étape 5 : Publier et Tester

Vous pouvez maintenant publier et tester cette fonctionnalité sur votre site web en live.

Pour plus d'astuces et de Tips, restez connectés à notre blog NoCode !

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

Visuel avec code javascript personnalisé et logos d'outils IA populaires : Open AI, cursor, Claude, github copilot, etc.
Documentation
IA

IA et développement web, une révolution technologique en cours

IA et développement web, une révolution technologique en cours
Make vs n8n vs Zapier
Documentation
NoCode

n8n vs Make vs Zapier : comparatif complet pour automatiser vos workflows en 2025

n8n vs Make vs Zapier : comparatif complet pour automatiser vos workflows en 2025
photo noir et blanc d’un expert digital marketing pris de dos entrain de présenter un projet de communication sur son ordinateur à un client
News
SEO

Les 10 meilleures agences digitales et communication pour les professionnels de la finance en 2025

Les 10 meilleures agences digitales et communication pour les professionnels de la finance en 2025

Transformez votre site web en un moteur de croissance.

Nous contacter