CMS Slider height control for items with a range of text — HUGE gaps above and below. How to fix this?

Finsweet Components Slider
1

Description

I’m using the CMS Slider for testimonials. The testimonials are of varying lengths, so their heights can be quite different, particularly on mobile (see attached). It appears the main slider area is being set to the tallest item but not necessarily the viewable item, so there can be massive gaps above and below a shorter testimonial and it looks terrible/obviously unintentional. I’m not sure where I can control this?

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. Works okay on Desktop
  2. As you reduce towards mobile landscape/portrait the height issue becomes more apparent (you’ll need to view this on the actual domain to see the behavior, possibly on a mobile device).
  3. I had to hide pagination on Mobile landscape (fine) but the height (gaps above and below) are the big issue here.

Expected Behavior

Expected it to adapt to the height of the visible item? What’s the workaround, somehow limiting the character length on mobile? Is that possible?

Actual Behavior

Gaps above and below. Inconsistent height as scrolling the slider on Mobile.

Video/Screenshots

IMG_5068
IMG_50681170×2532 305 KB
IMG_5069
IMG_50691170×2532 208 KB

  • Screenshots (if applicable): Uploaded two screenshots — one with a long testimonial and with a short testimonial showing the gaps.

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

2

Hey @nick1!

Apologies for the delay.

The slider is currently calculating its container height based on the tallest slide in the collection. That’s why shorter testimonials show big gaps above and below.

The simplest fix is to enable Auto Height in your Slider Configuration:

  • Open the Finsweet Components app in your Webflow project
  • Create a new testimonial slider instance
  • In the Configure tab, toggle on Auto Height
  • Republish the site

If you’d prefer not to reconfigure the slider from scratch, you can also set this programmatically using the Slider API:

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      const [sliderInstance] = sliderInstances;
      sliderInstance.params.autoHeight = true;
      sliderInstance.update();
    },
  ]);
</script>

This will automatically resize the slider container to match the height of the active slide.

Alternative approaches:

  • Limit testimonial length in your CMS, or
  • Use CSS line clamping for mobile, for example:
<style>
  .testimonial_quote {
    display: -webkit-box;
    -webkit-line-clamp: 8; /* Adjust number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>