Hide the dot indicators in the BX Slider of SuiteCommerce

1. Check for Carousel Image Length: 

   – Use `Configuration.get(‘home.themeCarouselImages’)` to retrieve the array of carousel images. 

   – If the array length is greater than or equal to 1, hide the pager. 

 

2. JavaScript Code: 

 

 

   var slider = Configuration.get('home.themeCarouselImages'); 
       // Initialize BXSlider and hide the pager if the condition is met 
       Utils.initBxSlider($slider, { 
           auto: true, 
           autoStart: true, 
           pause: 5000, 
           controls: showControls, // hide next/prev if only 1 
           pager: showControls,    // hide dots if only 1 
           nextText: '<a class="home-gallery-next-icon"></a>', 
           prevText: '<a class="home-gallery-prev-icon"></a>', 
           slideWidth: window.innerWidth 
       }); 

 

     
  // Custom logic to hide the pager if there's only one image 
 
       if (slider.length <= 1) { 
           $('.bx-pager').hide();  // Hide pager when there's only one image 
       } 

    

Leave a comment

Your email address will not be published. Required fields are marked *