Hide CMS slider Navigation if 1 Webflow slide

Tutorial

March 20, 2023

3 min

H2 Example

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