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.