AnythingSlider с динамической высотой?

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

Я получил его на работу в настоящее время. Параметр resizeContents для AnythingSlider должен быть установлен в false, тогда приведенный выше сценарий делает то, что я хочу.

Answer 2

Привет, если это полезно, пожалуйста, дайте мне знать.

`функция heightLeveler (группа) {

var tallest = 0; 

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

heightLeveler(".canythingslider");

Answer 3

У меня была та же проблема (CMS - TYPO3, я пытаюсь сделать слайдер с ext. Grideslements). Для меня это решение работает лучше:

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 растягивается до размеров этого контейнера (с расширением = 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 
});