1

Web サイトにレスポンシブ デザインを実装しようとしていますが、注目のコンテンツ スライダーで少し動けなくなりました。

注目のコンテンツ スライドに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,
   });

今のところ、次のように head でメディア クエリを実装した 2 つのスタイル シートを単純に使用しています。

<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 のプレゼンテーション アニメーションなどは使用しません。

4

1 に答える 1

3

これを行うにはいくつかの方法がありますが、常にいくつかの違いがあります（ライブウィンドウの変更に応答する非常に高度な検出セットアップを実装した場合を除く）。メディアクエリは（いつでも）サイズの変更に応答し、ここでのコードは1回だけ実行されます（Codaスライダーを初期化する直前）。

1.画面の使用可能な幅を少しチェックして幅を検出します。

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

2.モバイルスタイルシートで適用した特定のスタイルを検出します。

たとえば#header、の高さを取得すると50pxしますmobile.css。そのシートがアクティブであるかどうかは、その高さをチェックすることで検出できます。

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

他の方法（ダミーのメディアクエリを作成するなど）がありますが、どちらも必要な処理を実行する必要があります。

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

于 2012-01-03T17:12:47.767 に答える