user3398797 user3398797 - 1 year ago 56
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:

https://jsfiddle.net/thx03jc7/38/

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


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: http://glide.jedrzejchalubek.com/docs.html#options

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download