Slides per view auto and equal height

Finsweet Components
1

Description

I’m trying to follow an example I saw on the demos where the slider is set to slides per view: auto and it maintains a dynamic width while the height is equal. So far turning on Slides per view Auto has no effect on any breakpoint. The taller images stick out at the bottom .

Here’s the desired look I’m going for (8th section here: Slider Demo Page - Finsweet Components )

example
example1640×1788 219 KB

Additional Context

  • Browser: Chrome 142
  • Device: Desktop and iPhone

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

2

@dev7

The Slider Component won’t display slides-per-view auto or equal height settings while you’re in Webflow Designer. These effects only appear on the published site because they require JavaScript calculations.

To set up dynamic width with equal heights (like in the demo):

In the Finsweet Components App:

  1. Open your slider component for editing
  2. In the Configure tab, find “Slides per view” and set it to “Auto”
  3. Toggle on “Equal Height” to maintain consistent slide heights
  4. Publish your site to see the effect

Keep in mind:

  • Equal height calculates based on the tallest slide
  • If you prefer slides to adjust to individual content height, use “Auto Height” instead
  • For the exact behavior in the 8th section of the demo, use Equal Height with Slides per view set to Auto

If you’re still having issues with these settings, @Support-Luis or @Support-Pedro can help with programmatic solutions using the Slider API.

Remember that you’ll need to publish and view the live site to see these JavaScript features in action!

3

@Support-Luis There is no “Equal Height” that exists in the settings. Also I am testing the results from a published page, not the editor. Let me know if you have any suggestions. Thanks

4

Hi @dev7,

Could you please share a read-only or published site link?

That way we could check out what exactly is the issue

Thanks

5

I am having the very same issue: There is no equal height option showing. The suggested solution does not work: how to fix this?
site: Vysions Real Estate – Potenzial erkennen, entwickeln, erzielen
Share Link: Webflow - vysions-neu

6

Hey @gerd

Once you’ve set slides per view: auto in the Components App Panel, the equal height + auto width effect is through styling

Set width on your slide element .fs-slider_slide (e.g. 350px) so that the slides don’t just default to their default 100% width

Then for equal height, add this custom css at the page’s Inside <head> tag section

<style>
 /* Slides stretch to tallest card height */
  .fs-slider_list {
    align-items: stretch;
  }

  /* Card fills the full slide height */
  .fs-slider_slide .card_link {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Image keeps its aspect ratio, doesn't stretch */
  .fs-slider_slide .card_image {
    flex-shrink: 0;
  }

  /* Text body grows to fill remaining space */
  .fs-slider_slide .card_body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
</style>

Let me know!

7

You could use

.fs-slider_slide {
  width: clamp(260px, 30vw, 400px);
}

To make the slide with responsive

That reads as never narrower than 260px, prefer 30% of the viewport width, never wider than 400px

Bump up the 30vw to higher number e.g. 85vw so it slides look fuller on mobile