JavaScript-слайдер, который автоматически изменяет размер

Question

Я пытаюсь создать слайдер контента для клиента, который отображает последние четыре сообщения. Сейчас это простой HTML, но у меня проблема.

При необходимости ползунок должен иметь высоту 180px с полосой прокрутки. Мой слайдер, похоже, работает, за исключением того, что слайд-боксы имеют такую ​​высоту, как самая высокая коробка. Это оставляет короткие посты с тонны пустого пространства под ними.

Кто-нибудь знает об исправлении?

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

Я видел, что Quovolver делает это, но я хотел бы знать, как

Answer 1

Основная проблема заключается в #slidesContainer должна быть динамически изменен для того, чтобы его родителя, чтобы узнать, как долго для прокрутки. Одним из способов решения этой проблемы является, чтобы изменить анимировать вызов включить функцию обратного вызова:

$('#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 divs, которые не отображаются. Затем #slidesContainer автоматически изменит размер только на видимый (не отображаемый: none) слайд.

Answer 2

Я обновил ваш код здесь JS Fiddle. Вам нужно удалить свойство min-height и установить цвет фона в div div.