Hide CMS slider navigation if 1 Webflow slide

If you are using a CMS slider in your Webflow project and you 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 already done so, here is the Finsweet documentation with attributes to add a CMS slider in your Webflow project.

Please note that when you set up your CMS slider, it is not directly visible from the editor, or even the Designer. You have to publish your project for it to work.

It will also be necessary to remove 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 points of the slider by customizing 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

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

Step 4: Adding JavaScript code to your 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>

Step 5: Publish and Test

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

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