0

Wordpress ベースのレスポンシブ Web サイトがあり、ブラウザ ウィンドウの幅に応じてSwiperを呼び出したいと考えています。だから私はこれを書いた：

var browserwidth = 670;
if ($(window).width() < browserwidth) {
  var mySwiper = $('.swiper-container').swiper({
    mode:'horizontal',
    loop: true,
    grabCursor: true,
    paginationClickable: true
  });
}

うまく機能しますが、ユーザーがウィンドウのサイズを変更すると、Web サイトが少し乱雑になります。

だから、私はそれをすべてインサイトに書きました$(window).resize。それは機能しましたが、2 つの望ましくないことが起こりました。

  1. ユーザーが でブラウザを起動し< browserwidth、ウィンドウのサイズを に変更するとbrowserwidth、Swiper がリロードされ続けます。これはそれほどクールではありません。
  2. ユーザーが でブラウザを起動し、< browserwidthを超えてウィンドウのサイズを変更すると、既存の機能browserwidthを使用しても Swiper は「オフ」になりません。mySwiper.destroy()

では、jQuery呼び出しをオン/オフにしたり、呼び出されたことを検出して破棄したりするにはどうすればよいですか?

4

4 に答える 4

0

パーセンテージ ベースの幅を作成するだけswiper-containerで、プラグインがそれを拾い上げて独自に反応します。

オプションを追加する必要がある場合がありますcalculateHeight:true

于 2014-02-08T15:34:32.780 に答える
0

ドキュメントには、resizeReInit$(window).resize でスライダーを自動的に再初期化するオプションがあることが示されています。独自のサイズ変更イベントを記述する代わりに、おそらくこれを使用できます。

ドキュメントを調べてみると、無効化や破棄をサポートしていないように見えますが、これは非常に奇妙です。ブラウザーの幅が要件を満たしていない場合は、手動で非表示/削除および表示/作成する必要がある場合があります。

于 2014-02-08T15:37:13.483 に答える