Adaptive Height

First, create the HTML markup, use an inner wrapper element for each slide. The height of this element will be used to calculate the height and will be set to the viewport element. This is necessary because the elements of the visible slides will have the same height, regardless of the content.

Then use adaptiveHeight: true option to enable adaptive height.

Optionally, add CSS transitions to f-carousel__viewport element to transition height changes.

Example:

<div class="f-carousel">
  <div class="f-carousel__viewport" style="transition: height 0.2s;">
    <div class="f-carousel__slide">
      <div>
        <p>
          1 <br />
          2 <br />
          3 <br />
        </p>
      </div>
    </div>
    <div class="f-carousel__slide">
      <div>
        <p>
          1 <br />
          2 <br />
        </p>
      </div>
    </div>
    <div class="f-carousel__slide">
      <div>
        <p>
          1 <br />
          2 <br />
          3 <br />
          4 <br />
        </p>
      </div>
    </div>
  </div>
</div>

1
2
3

1
2

1
2
3
4

JS Bin Example