Carousal - 显示项目高度动态

问题描述：

我正在使用GlideJS来显示carousal。问题是每个项目都会自动获取内容最多的项目的高度。这导致内容较少的项目与carousal之后的HTML元素之间的空白。为了说明这个问题，我创建了以下小提琴：Carousal - 显示项目高度动态

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>

怎样才能让每一个项目的高度动态的，因此删除后，后面的项目和HTML元素之间的空白转盘？

答

可以使用autoheight属性：

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

所有选项：http://glide.jedrzejchalubek.com/docs.html#options

谢谢，这是有效的，我会把它作为正确的答案，我觉得以前没有看到它是愚蠢的。然而，看起来'autoheight：true'使得carousal在消失的情况下消失（请参阅https://jsfiddle.net/7dma7L84/21/）。你有没有想过如何在折叠的div中使用自动高亮显示carousal？ – user3398797

答

如果您包装内的另一个div你的文字在你的.box（像在拨弄你的第一项），你可以添加下面的CSS

.box > div{ 
    height: 200px; //or whatever height you wish 
}

here's the updated fiddle

Carousal - 显示项目高度动态

相关推荐