2012-06-21 111 views
0

新的,但在這裏敏銳的jQuery用戶有條件的jQuery,請溫柔:)極品響應網站

我使用的是夢幻般的caroufredsel(響應jQuery的旋轉木馬),並設置它起初讓我很高興與滾動功能。

它顯示吉他列表。目前只有3個,但我想在未來允許添加更多。

我正在建立一個響應式網站,而在較小的屏幕尺寸只有2個,然後1個吉他是可見的。問題是,你是從一個全寬瀏覽器開始,當你調整到一個較小的屏幕,jquery不會重新考慮這個問題。因此,您需要以較小的尺寸刷新屏幕以使滑塊控件顯示。

如同從小屏幕開始放大時一樣,控件仍保留在屏幕上,即使它們在功能上無用,因爲所有項目都顯示。

因此,我只希望控件在必要時可見(即,如果轉盤的所有內容都一次都可見,則不是),並且讓它們根據當前屏幕大小進行調整而不刷新。

我相信這是可能的通過銷燬旋轉木馬並在屏幕重新調整大小時重新啓動它,但我無法使其工作。

該網站是在線地址爲:http://www.wirebirdguitars.com/staging/guitars.html

任何幫助/建議將是真正的讚賞。謝謝!!

+0

漂亮的網站:-)這是'testimonials'順便說一句。 –

+0

其實,當你加載你的網站atm時,傳送帶沒有啓動。你需要擁有你原來在那裏的代碼***以及我在答案中加入的代碼。這樣它就會在第一次加載頁面時啓動,並且在窗口調整大小時重新啓動。 –

+0

Hi Jasper - 首先,非常感謝您的快速回復! 我已經開始使用您的回覆,但在回覆前確保我已正確理解。它的工作現在非常好! 看起來滾動仍然有點不穩定 - 有時在屏幕重新調整大小後滾動了多個項目,但它到達那裏。感謝網站上的友好評論 - 我剛剛成爲一名網頁設計師,這很難但很有趣,讓它變得恰到好處:-) 再次感謝 –

回答

1

將此添加到您的JS。

function doSomething() { 

    $('#guitars-gallery').trigger('destroy'); 

    $("#guitars-gallery").carouFredSel({ 
    auto: false, 
    circular: false, 
    prev: '#prev', 
    next: '#next', 
    responsive : true, 
    height : 'auto', 
    items : { width : 400, visible : { min : 1, max : 3 } } }); 

}; 

var resizeTimer; 

$(window).resize(function() { 
    clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(doSomething, 100); 
}); 

this question的啓發。

+0

隨着此代碼的添加,這是一個該死的性感響應網站,你在那裏先生@JOnathan Garner :-) –