fs-slider-1_button

Finsweet Components Slider
1

Hello, this may be a very simple matter. However, how can I influence the display of the Prev and Next buttons? Ideally, I would like the Prev button to be completely hidden at the beginning. Thank you very much. (I currently have the free version on webflow.io.)

2

Hey @martinkyjovsky95!

You can easily control the Prev and Next button visibility in your Slider component using CSS. Swiper automatically adds a swiper-button-disabled class to navigation buttons when they’re not needed :flexed_biceps:

Simply add this CSS to your project’s custom code:

.swiper-button-disabled {
  display: none;
}

This will automatically hide the Prev button when you’re on the first slide and the Next button when you’re on the last slide. It’s a clean solution that works perfectly with the free version of the Finsweet Slider.

Another option is to use the Slider’s callback API if you need more control:

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      const [sliderInstance] = sliderInstances;
      
      sliderInstance.on('slideChange', function () {
        // Custom logic here if needed
        console.log('Active slide:', this.activeIndex);
      });
    },
  ]);
</script>

Let us know if you need any help implementing this! If you need a more customized solution, @Support-Luis, @Support-Pedro or @jesse.muiruri can assist you further.