Question

我正在使用基本的Caroufredsel设置，顶部有一个主图像，下面是缩略图。我的问题是让缩略图以正确的大小显示是否只有一个，两个或更多。我已经知道它几乎存在，还有一个奇怪的问题。

显示div时，缩略图不会出现;使用调试器我可以看到caroufredsel_wrapper类的宽度为0，即使我已尝试在配置中将其明确设置为330。如果我调整浏览器的大小，它会“唤醒”并正确设置宽度。我无法弄清楚造成这种情况的原因。

配置：

$('#thumbs').carouFredSel({
  responsive: true,
  circular: false,
  infinite: false,
  width: 330,
  height: 65,
  auto: false,
  items: {
    width       : "auto",
    height      : "50%",
    visible     : {
      min         : 4,
      max         : 5
    }
  }
});

之前，我没有为旋转木马指定高度/宽度，并且显示了项目的“宽度：150，高度：75”。所有内容都按预期呈现，但项目的宽度实际上是可变的，因此如果只有1或2个缩略图，则图像会被拉伸。为什么忽略显式项目高度/宽度也是一个谜。

任何建议都会很棒;它让我疯了。

Answer 1

以上评论是正确的。如果你把旋转木马放在一个隐藏的div中，你稍后会通过标签显示它会使所有的高度和宽度都为零，这样看起来就像隐藏了caroufredsel。

您可以将更新尺寸触发器附加到选项卡单击。例如。

$j("ul.tabs a[href=#tab2]").click( function() {
            setTimeout(function() {
                $("#thumbs").trigger('updateSizes'); 
            }, 200);
        });

延迟确保在updateSizes触发器之前显示容器。

尽管在配置中指定宽度，但Caroufredsel宽度为0

1 个答案: