# Masquer Navigation d'un CMS slider si 1 diapositive Webflow

Tutoriel3 minPublié le Jul 08, 2022Dernière mise à jour le ![Webflow tuto avec icône Digidop](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712264bdaf18511045f7ce1_64760069e93084646c9ef15c_62a3618eed153234311dac36_Open-Graph-webflow-cursor.png)Sommaire

[

Copied](#)[

](#)[

](#)[

](#)
- [H2 Example](#)

Résumez cet article avec une IA[

ChatGPT](#)[

Claude](#)[

Grok](#)[

Perplexity](#)[

Google AI](#)Points clés de l'articleSi 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 ](/fr/blog/tutoriel-creer-cms-slider-webflow)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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712264bdaf18511045f7d71_64760069e93084646c9eef61_62c8253109768bfe8f5abce6_attribute-hide-slider-nav-dot-1-slide-weblow.png)

## É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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712264bdaf18511045f7d6e_64760069e93084646c9eef62_62c8253aa58c65f8af8248ce_custom-code-hide-slider-nav-dot-1-slide-weblow.png)

## É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](/fr/blog) !

[

](#)![Thibaut Legrand](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a47ec4cabceb0d6aa7c2e_thibaut-website%20(1).webp)Thibaut LegrandCo-fondateur de Vydera & Technical Solutions Architect[

](/fr/team/thibaut-legrand)[

](https://www.linkedin.com/in/thibaut-legrand-digidop/)[

](https://twitter.com/lgd_thibaut)+1200 lecteurs

## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives.

[S'inscrire

](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter

](https://digidopfr.substack.com/)

## Articles qui devraient vous intéresser

![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir

### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026

[Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir

### Webflow lance Source. Notre avis sur ce shift.

[Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir

### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA

[Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles

](/fr/blog)Les meilleurs projets web
commencent par une conversation[Discuter avec un expert

](/fr/contact)[Réserver un appel

](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)