Streaming live at 10am (PST)

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

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>