2013-02-16 3 views
3

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

사람이이 문제를 해결하는 방법을 생각이 있습니까?

답변

2

내가 지금 일을 얻었다. AnythingSlider의 resizeContents 옵션을 false로 설정해야합니다. 그런 다음 위의 스크립트는 내가 원하는 것을 수행합니다.

0

안녕하세요. 도움이 될 경우 알려 주시기 바랍니다.

`기능 heightLeveler (그룹) {

var tallest = 0; 

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

heightLeveler(".canythingslider");

+0

아니, 도움이되지 않습니다

더 나은 한 페이지 (뿐만 아니라 하나 개의 슬라이더)에 여러 슬라이더를 처리하는이 자바 스크립트 솔루션입니다. 그러나 어쨌든 고마워. 내 코드는 높이를 올바르게 설정하지만 AnythingSlider가 높이를 무시한 것처럼 보입니다. 높이가 CSS 파일에 설정되면 작동하지만 동적으로 설정해야합니다. 이것은 이상합니다! – horace

1

나는 (CMS는 TYPO3이며, 내선 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 class="anythingslider-outer"> 
    <ul class="anythingslider">...</ul> 
</div> 

이 외부 용기는 높이를 가져옵니다, 폭이 이제 유연합니다. Anythingslider는이 컨테이너의 크기로 확장됩니다 (expand = true 포함).

$("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 
});