如何禁用移動屏幕分辨率的Coda Slider？

Question

我試圖落實my website一個負責任的設計，我得到的特色內容滑塊有點卡住了。

我對我的精選內容幻燈片使用了Coda Slider，我希望爲小屏幕寬度發生的事情是中止滑塊的jQuery功能並刪除滑動功能的內聯樣式，以便它只是顯示的塊。

我敢肯定我以前見過像這樣的例子，但是當我剛經歷了我的書籤挖例子，張貼在這裏，我真的無法找到任何實際出現這樣的工作方式。也許是因爲JS的限制會使這不可行？

下面是我使用來實現滑塊jQuery的。有什麼我可以簡單地添加，它會告訴它中止並恢復正常的屏幕寬度在一定的大小？

// Coda slider via http://www.ndoherty.biz/demos/coda-slider/2.0/ 

    $('#coda-slider-1').codaSlider({ 
     dynamicArrows: false, 
     dynamicTabs: false, 
     autoSlide: true, 
     autoSlideInterval: 4000, 
     slideEaseDuration: 500, 
     autoSlideStopWhenClicked: true, 
    }); 

現在我只是使用與媒體查詢實現爲頭如下兩個樣式表：

<link rel="stylesheet" href="/css/2011/fullwidth-responsive.css" media="only screen and (min-width : 480px)" /> 
<link rel="stylesheet" href="/css/2011/mobile.css" media="only screen and (min-width : 320px) and (max-width : 480px)" /> 

所以我想在JS中止與移動樣式表中對應踢，基本上我只會用CSS來呈現內容，而不是使用任何JS表示動畫等，比如整個網站的滑塊。

Answer 1

有幾個方法可以做到這一點，但總是會有一些差別（除非你實現一個非常先進的檢測設置，響應實況窗口的變化）。媒體查詢將隨時響應任何尺寸變化，我們的代碼僅運行一次（就在我們初始化Coda滑塊之前）：

1.通過檢查屏幕可用寬度：

if (screen.availWidth > 480) { 
    // .. initialize Coda here .. 
} 

2.檢測你向你的手機樣式表的特定樣式：

例如，假設#header得到的50px高度在mobile.css。您可以檢測如果表是通過檢查該高度活躍：

if ($("#header").width() != 50) { 
    // .. initialize Coda here .. 
} 

還有其他的方法（比如創建一個虛擬媒體查詢，等等），但無論這些應該做你想要什麼。

注意：您可能還需要有一個「其他」聲明，消除/添加您可能需要爲您的移動佈局類。