Question

我正在使用anythingslider并遇到问题。

我的内容元素从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

我现在就开始工作了。必须将AnythingSlider的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>

这个外部容器获得高度，现在宽度也很灵活。 Anythingslider被拉伸到这个容器的尺寸（使用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

如果这有用，请告诉我。

`function heightLeveler（group）{

    var tallest = 0;

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

heightLeveler(".canythingslider");

动态高度的AnythingSlider？

3 个答案: