Solved: How to hide slider arrows and dots if there's only one image in the CMS image gallery?

Design help Custom code
1

I’ve been using CMS slider from finsweet. I’m not sure how to hide a CMS slider if there’s only 1 image inside the image gallery. Ideas?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Found a solution!

Add this code to after tag Replace the ‘.gallery15_slide’ with your slider class

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

Next, add this to your previous, next, slider dots elements(these are normally link elements). Add a Custom Attribute: “Data-slider” and “Item”

1 Like
3

To hide slider arrows and dots if there’s only one image in a CMS image gallery:

  1. Check Image Count: Use a conditional statement to check if the image count is 1.

  2. Apply CSS/JS:

    • CSS: Add a class to hide arrows and dots.
    • JS: Alternatively, use JavaScript/jQuery to hide them dynamically.

    Example in JavaScript:

    if (galleryImages.length === 1) {
    document.querySelector('.slider-arrows').style.display = 'none';
    document.querySelector('.slider-dots').style.display = 'none';
}

This ensures arrows and dots are hidden when there’s only one image in the gallery.

1 Like