任何具有动态高度的滑块？答案

【问题标题】：AnythingSlider with dynamic height?任何具有动态高度的滑块？
【发布时间】：2013-02-01 10:39:50
【问题描述】：

我正在使用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();

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

【问题讨论】：

标签： javascript jquery css height anythingslider

【解决方案1】：

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

【讨论】：

【解决方案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
});

【讨论】：

【解决方案3】：

您好，如果有帮助，请告诉我。

`function heightLeveler(group) {

    var tallest = 0;

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

heightLeveler(".canythingslider");

【讨论】：

不，它没有帮助。不过还是谢谢。我的代码正确设置了高度，但如果我这样设置，AnythingSlider 似乎会忽略高度。如果在 CSS 文件中设置了高度，那么它可以工作，但我需要动态设置它。这很奇怪！