Hide CMS slider Navigation if 1 Webflow slide

Tutorial
March 20, 2023
3 min
Webflow tutorial with Digidop icon
Use AI to summarize this article
Key points

If you're using a CMS slider in your Webflow project and want to hide the slider navigation (slider dots) when there is only one visible element (one slide), this tutorial is for you.

Step 1: Set Up Your CMS Slider

If you haven't done so already, here is the Finsweet documentation with attributes to add a CMS slider to your Webflow project.

Note that when you set up your CMS slider, it won't be immediately visible from the editor or even the Designer. You need to publish your project for it to work.

You will also need to delete the second slide (Slide 2) from the "Slider" element.

Step 2: Design Your Slide Nav

After inserting a CMS slider, you can customize the navigation dots of the slider by modifying the following CSS code:

<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>

Step 3: Add an Attribute to Your Slide Nav

Once you've customized your navigation, you will need to add an attribute to your Slide Nav element.

The "Name" will be: data-slider

The "Value" will be: item

attribute to hide slide nav dot if only 1 slide in webflow

Step 4: Add JavaScript Code to Your Page

After adding the attributes, you will need to insert the following code into the custom code of your page: in "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>
javascript code to hide slide nav dot if only 1 slide in webflow

Step 5: Publish and Test

You can now publish and test this functionality on your live website.

For more tips and tricks, stay connected to our NoCode blog!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

Screenshot of Google search homepage with search bar and Google logo.
Documentation
SEO

3 tools to track your SEO rankings in the SERP

3 tools to track your SEO rankings in the SERP
ChatGPT 5.0 OpenAI
News
AI

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025
Screenshot showing two versions of Ramify’s homepage. The background version features a man standing in an office with the text “Vivez l’expérience banque privée, autrement”. The foreground version displays a cleaner layout with the message “Votre patrimoine, notre expertise”.
Documentation

How we helped Ramify increase its Conversion Rate with an A/B Testing Strategy using Optibase

How we helped Ramify increase its Conversion Rate with an A/B Testing Strategy using Optibase

Want to turn your website into your most valuable asset?

Contact us today