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 div。然后#slidesContainer将自动调整为仅显示可见（不显示：无）幻灯片。

Answer 2

我已在此处更新了您的代码JS Fiddle。您需要删除min-height属性并将背景颜色设置为幻灯片div。

自动调整大小的JavaScript滑块

2 个答案: