2011-12-23 6 views
4

최근 4 개의 게시물을 표시하는 클라이언트에 대한 콘텐츠 슬라이더를 만들려고합니다. 지금은 그냥 일반 HTML이지만 문제가 있습니다.자동 크기 조정 JavaScript 슬라이더

슬라이더 상자는 필요할 때 스크롤 막대가있는 180px 높이 여야합니다. 내 슬라이더는 슬라이드 상자를 모두 가장 큰 상자만큼 크게 만드는 것 외에는 작동하는 것 같습니다. 그것은 그 아래에 빈 공간이있는 짧은 게시물을 남깁니다.

누구든지 수정 사항을 알고 계십니까?

http://jsfiddle.net/insitedesignlab/kQDcb/1/

나는 Quovolver가이 작업을 수행하는 것을 본 적이 있지만 나는 #slidesContainer 동적으로 순서를 크기를 조정해야 할 방법

답변

3

기본적인 문제가 알고 싶어요 얼마나 오래 알고 부모의 를 스크롤합니다. 문제를 해결하는 한 가지 방법은 콜백을 포함하도록 애니메이션 호출을 변경하는 것입니다 : 아마 계산을하기 위해 약간 더 좋은 방법이있다

$('#slideInner').animate({ 
     'marginLeft' : slideWidth*(-currentPosition) 
    },null,null, 
    function(){ 
     $('#slidesContainer').css('height', $(this).children(".slide:nth-child(" + parseInt((Math.ceil(-1*slideWidth*(-currentPosition)/$("#slideshow").width())) + 1) + ")").height() + "px"); 
    } 
); 

,하지만이 작동합니다. 또는 표시되지 않는 다른 모든 .slide div를 숨길 수 있습니다. 그런 다음 #slidesContainer는 표시 (표시 없음 : 없음) 슬라이드로만 자동 크기 조정됩니다.

+0

정말 고마워요! 나는 이것을 끝내려고 하루 종일 두근 두근 거리고 있었다. Awesome =) –

0

여기 코드를 업데이트했습니다. JS Fiddle. 최소 높이 속성을 제거하고 배경 div를 슬라이드 div로 설정해야합니다.

+0

그게 효과가 있었지만 정확히 내가 찾던 것이 아니 었습니다. 다른 답변과 마찬가지로 최소 높이를 유지하여 필요할 경우 y 스크롤 막대를 추가 할 수 있습니다. 그래도 고마워! –