2013-05-30 37 views
0

我使用carouFredSel插件構建了一個圖像滑塊,一切工作正常,只有一個圖像旋轉木馬,但隨着我繼續構建我的網站,我遇到了一些問題。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 

});

回答

0

我不確定這是什麼原因導致您的麻煩,但它聽起來像它可能是我碰到的同樣的問題。我通過點擊觸發了animate(),顯示隱藏的div中的旋轉木馬。直到我將轉盤初始化放入後動畫函數之前,它才正確渲染 - 確保轉盤未被初始化直到div準備好似乎是關鍵,可能是因爲轉盤代碼查看了事物的大小當它準備圖像時。所以我所做的是包裹傳送帶初始化函數中:

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

然後在顯示的DIV的代碼,它調用該函數:

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

一旦我搬到傳送帶初始化那裏,它開始工作。我希望這可能會幫助你找到問題的根源。