# Slides per view auto and equal height

**URL:** <https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404>\
**Category:** Finsweet Components\
**Tags:** cmsslider\
**Created:** [November 13, 2025, 1:36am UTC](https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404 "2025-11-13T01:36:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dev7](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/dev7/32/5548_2.png) [@dev7](https://forum.finsweet.com/u/dev7)\
**Post date:** [November 13, 2025, 1:36am UTC](https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404/1 "2025-11-13T01:36:04Z")

</div>

## 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](https://finsweet.com/components/slider/demos) )

 ![example](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/e/e31b7557e78d56992c49b389b73303501ffd7d84.jpeg)

## 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.

---

<div class="post-metadata">

**Author:** ![Support-Finn](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-finn/32/5169_2.png) [@Support-Finn](https://forum.finsweet.com/u/Support-Finn)\
**Post date:** [November 13, 2025, 6:03am UTC](https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404/2 "2025-11-13T06:03:50Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![dev7](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/dev7/32/5548_2.png) [@dev7](https://forum.finsweet.com/u/dev7)\
**Post date:** [November 13, 2025, 6:16am UTC](https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404/3 "2025-11-13T06:16:11Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![jesse.muiruri](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/jesse.muiruri/32/5523_2.png) [@jesse.muiruri](https://forum.finsweet.com/u/jesse.muiruri)\
**Post date:** [November 14, 2025, 4:42pm UTC](https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404/4 "2025-11-14T16:42:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gerd](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/gerd/32/6372_2.png) [@gerd](https://forum.finsweet.com/u/gerd)\
**Post date:** [June 28, 2026, 11:52am UTC](https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404/5 "2026-06-28T11:52:38Z")

</div>

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](https://vysions-staging.webflow.io/startseite)  
Share Link: [Webflow - vysions-neu](https://comments.webflow.com/comment/vysions-staging?utm_medium=project_link&utm_source=designer&utm_content=vysions-staging&project=ec8435f928b6b9a39f469f86a4ca6059&workflow=comment&pageId=6a3d2a715cd973bcb7aa8531&locale=de-DE)

---

<div class="post-metadata">

**Author:** ![jesse.muiruri](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/jesse.muiruri/32/5523_2.png) [@jesse.muiruri](https://forum.finsweet.com/u/jesse.muiruri)\
**Post date:** [June 29, 2026, 8:40am UTC](https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404/6 "2026-06-29T08:40:58Z")

</div>

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

```auto
<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!

---

<div class="post-metadata">

**Author:** ![jesse.muiruri](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/jesse.muiruri/32/5523_2.png) [@jesse.muiruri](https://forum.finsweet.com/u/jesse.muiruri)\
**Post date:** [June 29, 2026, 8:44am UTC](https://forum.finsweet.com/t/slides-per-view-auto-and-equal-height/6404/7 "2026-06-29T08:44:44Z")

</div>

You could use

```auto
.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