CMS Slider: Possible to have Fixed width slides (in pixels)?

Finsweet Components Slider
1

Description

My client wants the slides to have a fixed width of 384px on Desktop and 304px on tablet/mobile. I tried using Slides Per View: Auto but this only leaves us with a percentage option for the Slide Size setting. Is there a way to control the width of the slides using pixels? Thanks in advance!

Site URL

  • URL: polymathstg dot webflow dot io (forum isn’t letting me put more than 2 links in my post)
  • Webflow Read-only link: Webflow - Copy of Polymath

Steps to Reproduce

  1. Tried setting the Slides Per View to Auto
  2. Tried using a Pixel value for the Slide Size setting
  3. Also tried adding a fixed width in pixel value directly to the slides.

Expected Behavior

Would expect the slider to show slides that have a 384px width on desktop (304px on tablet/mobile), without really caring about the number of slides visible at once.

Actual Behavior

The slider seems to only work with a fixed number of visible slides, or with an Auto number of slides but with a Percentage value for the width of the slides.

Video/Screenshots

Additional Context

  • Browser: Chrome Version 132.0.6834.160
  • Device: Macbook Pro 16"
2

Hey @studio! You can try setting the slidesPerView setting to auto and then setting the width for each breakpoint with CSS like in the example below

[fs-slider-element='slide'] {
  width: 384px; /* Desktop width */
  margin-right: 24px;
}

/* Responsive for tablet and mobile */
@media (max-width: 991px) {
  [fs-slider-element='slide'] {
    width: 304px; /* Tablet and mobile width */
    margin-right: 24px;
  }
}

Let me know if this helps!

3

Hi Luis,
Thank you so much. This is working for us!

I have another question (let me know if this should be in a new thread instead):
Is there a way to “lock” the slider navigation arrows when we’re at the first slide or the last slide? I would like to achieve that to indicate the user that they can’t scroll further.

Thank you very much!
Cheers

4

Hey @studio!

We have added this natively! Inside the app, you can see the combo class that gets added to the buttons when the slider cannot scroll any further.

Screenshot 2025-04-02 at 18.41.59
Screenshot 2025-04-02 at 18.41.591608×1204 110 KB

Creating the combo class for the button should apply this style.

If not, I see you have added this style for disabled buttons.

button[disabled], html input[disabled] {
  cursor: default;
}

Just add any style you’d like for the buttons!

1 Like