Normalize Scroll Height

[axelson]

Is it possible for each slide to have it's own height? Right now the shorter slides have giant blank spaces below them since all the slides are the same height as the longest slide.

Related swipe.js issue: thebird/Swipe#116

[loup-brun]

Hi @axelson,

What you want to achieve may be accompllshed with CSS.

In fact, the Swipe container takes up as much height as the biggest slide; the smaller slides do not cover up all the Swipe container.

The way to accomplish a more aesthetic result is by normalizing the slides' heights altogether. There are several ways to achieve this:

• If the height of each div is predictable and can be pre-determined, you may assign a fixed height to each swipe-wrap > div (e.g. height: 260px).
• If the height of each div is fluid or unpredictable, you could use flexbox by simply adding display: flex to the .swipe-wrap container. By default, the browser will make all children stretch the height of their container (specified by the align-items: stretch rule).

I set up a little jsbin demo for you to view the solution in effect. Here's a screenshot:

Please let me know if this suits your needs. If so, you may close this issue.

[loup-brun]

I'll close this since it is actually a matter of dealing with the CSS. Let me know if you need help achieving what you want.