解像度が変更されたときカルーセル2のレンダリング

Question

私はレスポンシブギャラリーで作業しています。解像度に応じて表示するピクチャの数を変更する必要があります。たとえば、728pxより小さい場合は、1つのピクチャだけを表示する必要がありますが、それより大きいピクチャを表示する必要があります。私はowl carousel 2スクリプトを使用していますので、以下はspecyfic divの初期化の例です。あなたが見ることができるように私は3のパラメータ "アイテム"を設定し、良いようだが、画面が小さいときに私はそれを1に設定する必要があります
私の質問は - カルーセルのパラメータを動的にレンダリングされたときに変更する方法？

$（ "私のギャラリー。"）owlCarousel（{ 項目：3、 }）;。 documentation 1として

> this picture shows what i want <

Answer 1

、既存のカルーセルをREINITするreplace.owl.carouselを使用する必要があります。私はワイドスクリーン上だかない場合、私は保存window.loadイベントで

1. 私は窓にカスタムオブジェクトを作成します（myOO = myOwlObject）、：

   私は以下のやっていることです。私はまた、スクリプトを通していくつかのパラメータを保存するためにそれを使用して、簡単にそれらを変更することができます。

2. ワイド/ナロー状態に基づいて、carouselを1つまたは3つの項目で初期化しています。
3. window.resizeイベントで、私はisWideに保存されたものと同じ間隔（ワイド/ナロー）であるかどうかをチェックします。私は別の間隔にいるときに、カルーセルを交換し、新しい間隔をisWideに保存します。

$(window).on('load', function(){ 
    window.myOO = { 
    breakpoint: 600 
    isWide: $(window).width() > this.breakpoint, 
    options: this.isWide ? {items:3} : {items:1} 
    }; 
    $(".my-gallery").owlCarousel(window.myOO.options); 
}) 
$(window).on('resize', function(){ 
    var shouldReinit = ($(window).width() > window.myOO.breakpoint) !== window.myOO.isWide; 
    if (shouldReinit) { 
    if ($(window).width() > window.myOO.breakpoint) { 
     $(".my-gallery").trigger('replace.owl.carousel', [{items: 3}]); 
    } else { 
     $(".my-gallery").trigger('replace.owl.carousel', [{items: 1}]); 
    } 
    window.myOO.isWide = $(window).width() > window.myOO.breakpoint; 
    } 
})