0

我正在使用一个基本的 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 个缩略图存在，图像就会被拉伸。为什么明确的项目高度/宽度被忽略也仍然是一个谜。

任何建议都会很棒；它快把我逼疯了。

4

1 回答 1

1

上面的评论是正确的。如果您将轮播放在一个隐藏的 div 中，稍后您会通过选项卡显示它会使所有高度和宽度都为零，因此看起来 caroufredsel 是隐藏的。

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

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

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

于 2013-08-06T04:59:10.970 回答