自动调整大小的 JavaScript slider

Question

我正在尝试为客户构建一个内容 slider ，以显示他们最近的四篇文章。现在它只是纯 HTML，但我遇到了问题。

slider 框需要 180 像素高，必要时带有滚动条。我的 slider 似乎可以工作，只是它使 slider 框都和最高的框一样高。这样一来，简短的帖子下方就会留有大量空白。

有人知道解决方法吗？

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 div。然后 #slidesContainer 将自动调整大小以仅显示可见(不显示:无)幻灯片。