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.

3

Hi there!

I’ve built a collection list-based slider using the Finsweet Slider Component library. It’s working great. However, I can’t get the above code to work to hide the navigation buttons. I want three things to happen:

  1. When it’s at the beginning of the slider, it hides the Prev button.
  2. When it’s at the end of the slider, it hides the Next button.
  3. When there aren’t enough slides to fill the slider (e.g., it’s set to display six, but the list only has two items), I want both buttons to be hidden.

I placed the following in the header for the page below the script call, as shown:

<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>
<style>
  .swiper-button-disabled {
  display: none;
}
</style>

Here is the screen cap of the slider structure:

Screenshot 2026-06-04 at 17.15.37
Screenshot 2026-06-04 at 17.15.37740Ă—908 67.2 KB

It’s a nested collection list that renders the slider depending on two selected parent items and their associated selected multi-reference fields.

The first list is associated with the first parent item, and it has seven items, so Prev should be hidden at load since it’s at the beginning of the list, and when they activate Next, Prev should disappear (it’d reach the end of the list). The second list is associated with the second parent item, and it has only two items, so both should be hidden.

Any ideas as to why it’s not working?

Thanks!

4

For reference this is how it renders:

Screenshot 2026-06-04 at 17.02.41
Screenshot 2026-06-04 at 17.02.411920Ă—1188 159 KB

5

Hi @mchristy

Checking this out

6

Hey @mchristy

This cdn script is actually a pretty good hint you’re not using Finsweet Components, which is what hosts the Fisweet Slider

You actually need to watch the setup tutorial on the Build CMS Sliders in Webflow with Finsweet Components Youtube video

It shows how to actually get the Slider up and running

Then setup your configurations on the left-side bar Configure tab
E.g. toggle loop off

You might actually be able to achieve what you are looking into right there on the configs

Loop will definitely need to be off to achieve requirements 1 & 2

For requirement 3, try out this CSS

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

Could you please share the web page where this is implemented

Thanks

7

Ah, yeah, I was originally trying to do it with CMS Slider but wasn’t having much luck and decided to try Slider Component. I unfortunately assumed I’d need to leave the script in place, and it looks like it was causing some problems.

I removed the reference to the script via CDN, and applied your CSS above. Scenario 3 is now working, but scenarios 1 and 2, the behavior is the same (loop was turned off).

Here’s the site, still being created:

I appreciate your response and help!

8

… and I found the fix! The property “is-nav-disabled” combo class for the buttons was the key. I completely overlooked this in the component builder. Once I styled the combo class (for opacity to show it was working), everything looks great. I really appreciate your reply and pointing out my error with the referenced CDN script.

9

Ok awesome @mchristy

Glad you got it sorted!