javascript - 任何具有动态高度的滑块？

Question

我正在使用任何东西并且有问题。

我的内容元素是从 CMS 加载的，它们的高度可能会有所不同。我想将滑块高度设置为最高元素的高度，但这似乎不起作用。

我试过这样：

var max_height = 0;
$(".canythingslider .ccontentelement").each(function() {
    var h = $(this).height();
    if(h > max_height) {max_height = h;}
});
$(".canythingslider").css("height", max_height + "px");
$(".canythingslider").anythingSlider();

有谁知道如何解决这个问题？

Answer 1

我现在开始工作了。AnySlider 的 resizeContents 选项必须设置为 false，然后上面的脚本会执行我想要的操作。

Answer 2

我遇到了同样的问题（CMS 是 TYPO3，我尝试用 ext.gridelements 制作一个滑块）。对我来说，这个解决方案效果更好：

var max_height = 0;
$(".anythingslider .contentelement").each(function() {
    var h = $(this).height();
    if(h > max_height) {max_height = h;}
});
$(".anythingslider-outer").css("height", max_height + "px");
$(".anythingslider").anythingSlider(
    'expand': true
);

我所做的是：在anythingslider周围包裹一个div：

<div class="anythingslider-outer">
    <ul class="anythingslider">...</ul>
</div>

这个外部容器得到高度，宽度现在也是灵活的。任何滑块都被拉伸到这个容器的尺寸（expand=true）。

更好的是这个 JavaScript 解决方案，它可以在一页上处理多个滑块（不仅仅是一个滑块）：

$("ul.anythingslider").each(function(){
    var anythingsliderContainer = $(this).closest(".anythingslider-outer");
    anythingsliderContainer.css("height", 0);
    anythingsliderContainer.find("ul.anythingslider > li").each(function(){
        if($(this).height() > anythingsliderContainer.height()){
            anythingsliderContainer.css("height", $(this).height());
        }
    });
});

$('ul.anythingslider').anythingSlider({
    'expand': true
});

Answer 3

嗨，如果这有帮助，请告诉我。

`功能高度水平仪（组）{

    var tallest = 0;

    group.each(function () {
        thisHeight = $(this).height();
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

heightLeveler(".canythingslider");