Question

我使用carouFredSel插件构建了一个图像滑块，一切都可以正常运行，但是当我继续构建我的网站时，我遇到了一些问题。

第一个可见的旋转木马工作正常，但是如果你单击右上角的IMG链接看第二个旋转木马，它会忽略一些代码，告诉它一次只显示一个项目或类似的东西。

我确保两者中的所有内容都设置相同，我尝试过显示和浮动更改而没有运气

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

猜测它与jQuery脚本的显示更改有关

任何想法??

$("#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

我不确定这是否会给您带来麻烦，但听起来这可能与我遇到的问题相同。我的旋转木马在一个隐藏的div中，由一个点击触发的animate（）显示。直到我将轮播初始化放入后动画函数中才能正确呈现 - 确保在div准备好之前初始化轮播似乎是关键，可能是因为轮播代码查看了事物的大小什么时候准备图像。所以我做的是将轮播初始化包装在一个函数中：

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

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

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

一旦我在那里移动了轮播初始化，它就开始工作了。我希望这可能会帮助您找到问题的根源。

carouFredSel打破淡入

1 个答案: