淡入时carouFredSel中断

Question

我使用carouFredSel插件构建了一个图像滑块，使用一个图像转盘就可以很好地工作，但随着我继续构建我的站点，我遇到了一些问题。

第一个可见的carousel运行良好，但如果您单击右上角的IMG链接来查看第二个carousel，它会忽略告诉它一次只显示一项或类似内容的代码。

我已经确保了两者中的所有设置都是相同的，并且我已经尝试了显示和浮动更改，但没有成功

我现在也意识到这似乎是由淡入淡出过渡造成的，因为当我在第一个滑块上设置淡入淡出时，也会发生同样的事情。

我猜这与jQuery脚本所做的显示更改有关

http://coreytegeler.com/new/#work

有什么想法吗？

$("#web-carousel").carouFredSel({
width: "100%",
height: 450,
direction: "right",
circular: true,
infinite: true,
items: {
    visible: 1,
    width: "variable",
    height: 400,
    width: 720
},
scroll: {
    duration: 1000,
    pauseOnHover: true
},
auto: {
    timeoutDuration: 9999,
    delay: 5000
},
prev: {
    button: "#web-left",
    key: "left"
},
next: {
    button: "#web-right",
    key: "right"
},
pagination: {
    container: "#web-pagination",
    keys: true
},
swipe: true,
mousewheel: false

})；

Answer 1

我不确定这是否是给你带来麻烦的原因，但听起来可能和我遇到的问题是一样的。我将我的carousel放在一个隐藏的div中，这个div是由一个click触发的animate()显示的。直到我将carousel初始化放到一个后期动画函数中，它才能正确呈现--确保carousel在div准备就绪之前不被初始化似乎是关键，可能是因为carousel代码在准备图像时会查看事物的大小。所以我所做的就是将轮播初始化封装在一个函数中：

var do_carousel = function() {
  $('#carousel').carouFredSel({
    responsive: true,
    circular: false,
    etc...

然后在显示div的代码中，它调用该函数：

$("#carousel-div").animate({
  opacity: 'toggle',
  width: 'toggle',
}, 1200, function() {
  do_carousel();
});

一旦我把carousel初始化移到那里，它就开始工作了。我希望这能帮助你找到问题的根源。