Coda Sliderをモバイル画面解像度で無効にするにはどうすればよいですか？

Question

my websiteでレスポンシブデザインを実装しようとしていますが、おすすめのコンテンツスライダーでちょっとしたことがあります。

私のコンテンツスライドにはCoda Sliderが使用されていますが、小さな画面幅では、スライド機能のjQuery機能を中止してスライド機能のインラインスタイルを削除することができます単純にディスプレイのブロック。

私はこれまでのような例を見たことがあるとは思っていましたが、ここに投稿するためのブックマークを掘り下げたところで実際にこのように動作するように見えませんでした。おそらくJSの限界がこれを実現不可能にするからでしょうか？

スライダーを実装するために使用しているjQueryは次のとおりです。特定のサイズの画面幅で、中止して通常に戻すように指示するだけのものはありますか？

<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がで蹴るモバイルスタイルシートに対応して中止したいと思います。今、私は単に頭の中で次のようにメディアクエリで実装2枚のスタイルシートを使用しているために

// 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, 
    }); 

本質的には、私はCSSだけでコンテンツを提示し、JSプレゼンテーションアニメーションなどは使用しません。たとえば、スライダがフルサイトの場合などです。

Answer 1

ライブウィンドウの変更に対応する本当に高度な検出設定を実装していない限り、いくつかの違いがありますが、これを行うにはいくつかの方法があります。メディアクエリは、いつでもサイズの変更に対応します（ここでは、Codaスライダを初期化する直前）、コードは1回のみ実行されます（Codaスライダを初期化する直前）。0120-：例えば

は、#headerがあなたのmobile.cssに50pxの高さを取得すると言う：

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

2.はあなたのモバイルスタイルシートを適用する特定のスタイルを検出します。あなたは、そのシートはその高さをチェックすることによって、アクティブであるかどうかを検出することができます

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

あり（ダミーメディアクエリなどの作成など）他の方法がありますが、これらのいずれかは、あなたが欲しいものを行う必要があります。

注：モバイルレイアウトに必要なクラスを削除/追加する「else」ステートメントが必要な場合もあります。