0

我使用 carouFredSel 插件构建了一个图像滑块，并且在一个图像轮播中一切正常，但是当我继续构建我的网站时，我遇到了一些问题。

第一个可见的轮播效果很好，但是如果您单击右上角的 IMG 链接以查看第二个轮播，它会忽略告诉它一次只显示一个项目或类似内容的代码。

我已确保两者的设置都相同，并且我尝试过尝试显示和浮动更改但没有运气

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

猜测它与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

});

4

1 回答 1

0

我不确定这是否是给您带来麻烦的原因，但听起来这可能与我遇到的问题相同。我的轮播在一个隐藏的 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();
});

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

于 2013-07-17T03:43:06.957 回答