user3398797 user3398797 - 5 months ago 27
CSS Question

Carousal - display item height dynamic

I am using GlideJS to display a carousal. The problem is that each item automatically takes the height of the item with the most content. This results into white space between items with less content and HTML elements that follow after the carousal.
To illustrate this problem I have created the following Fiddle:

<div class="module module--horizontal">
<div id="Carousel" class="glide">
please see the above Fiddle for full code example

How can I make the height of each item dynamic and thus remove the white space between the items and HTML elements that follow after the carousal?

Answer Source

You can use autoheight property:

var carousel = $('#Carousel').glide({
    type: 'carousel',
    startAt: 1,
    touchDistance: 2,
    autoplay: 0,
    autoheight: true

All options: