Solution: hide slider nav/dot when only 1 slide is visible (page template) t

Design help Custom code
1

After using @hensy Amazing SOLUTION; CMS Gallery Slider Showing +1 Blank Slide
I had in some cases - 1 slide & the slide nav dot
visible (all other slides where hidden).
which looked weird.
so Asked for help and Niclas.S Technical Customer Support Specialist replied with a great solution… and here it is

Follow these steps

  1. Set a custom div attribute to the “Slide-Nav” element.
    data-slider="item" – See screenshot
  2. Repeat that for all your sliders
  3. Copy the javascript code and paste it in the custom code page settings. (Page template settings)
  4. Publish and preview the site

The javascript I wrote is checking all the elements on the page which has the attribute “data-slider” and checking the length of the children (slider-dots) inside each item. If we only have one item in a slider we add a CSS property display=“none” to that element.

Custom Javascript snippet:

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

1 Like
2

Hey this is working for me to automatically hide the little slider dots, but not the slider buttons. I applied the same data-slider=item to each slider button, and it does hide them, but it does not reveal them when there are 2+ items like it does for the dots. Any idea what could be going on there?

Edit: I see it’s because it’s checking the number of children in the dot container, not the number of slides. Not sure how to fix that, because I don’t know Java.

3

I tried this code and it only hides the dots, not the slider arrows. Here’s an updated code that works. It hides the slider arrows and dots if there’s only one slide or image inside the slider :

Add this code to after tag in your page settings and replace the ‘.gallery15_slide’ with your slider class

Make sure to add a custom attribute to your previous, next, slider dots elements(these are normally link elements). Custom Attribute: “data-slider” and “item”

<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) {  // Check if there's only one slide
        // Hide the slider dots
        item.style.display = "none";
        
        // Find and hide the arrow buttons
        var sliderWrapper = item.closest('.gallery15_slider');
        if (sliderWrapper) {
          var leftArrow = sliderWrapper.querySelector('.w-slider-arrow-left');
          var rightArrow = sliderWrapper.querySelector('.w-slider-arrow-right');
          if (leftArrow) leftArrow.style.display = "none";
          if (rightArrow) rightArrow.style.display = "none";
        }
      } else {
        // Show the arrows if there is more than one slide
        var sliderWrapper = item.closest('.gallery15_slider');
        if (sliderWrapper) {
          var leftArrow = sliderWrapper.querySelector('.w-slider-arrow-left');
          var rightArrow = sliderWrapper.querySelector('.w-slider-arrow-right');
          if (leftArrow) leftArrow.style.display = "";
          if (rightArrow) rightArrow.style.display = "";
        }
      }
    });
  }, 1000);
}
</script>```