AnythingSlider具有動態高度？

我正在使用anythingslider，並有問題。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();

有沒有人有一個想法如何解決這個問題？

來源

2013-02-16 horace

我現在的工作。 AnythingSlider的resizeContents選項必須設置爲false，然後上面的腳本完成我想要的操作。

來源

2013-06-20 07:56:15 horace

嗨，如果這有幫助，請讓我知道。

`函數heightLeveler（組）{

var tallest = 0; 

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

heightLeveler(".canythingslider");

來源

2013-02-16 15:46:40 Rosario

不，它並不能幫助。不過謝謝。我的代碼正確設置高度，但它似乎像AnythingSlider忽略高度，如果我這樣設置。如果高度被設置在CSS文件中，那麼它的工作原理，但我需要動態設置它。這很奇怪！ – horace 2013-02-16 16:43:24

我有同樣的問題（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 
);

我所做的是：總結一個div周圍anythingslider：

<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 
});

來源

2013-07-20 11:41:27 Sven

AnythingSlider具有動態高度？

回答

相關問題