JQueryウィンドウのサイズ変更とメディアクエリで1回スクリプトを実行します

Question

私はを使用してイメージカルーセルに電力を供給しています。

デスクトップの場合は、layout: 'autofill'を実行してください。モバイルの場合は、スクリプトをlayout: 'boxed'に実行します。これを実現するために

、私はModenizrのMQとウィンドウ.resize()を使用しています：

(function($) { 

    $(window).resize(function() { 
     if (Modernizr.mq('(max-width: 767px)')) { 

      var slider = new MasterSlider(); 
      slider.setup('masterslider' , { 
       width: 1440, // slider standard width 
       height: 400, // slider standard height 
       space: 5, 
       layout: 'boxed', 
      }); 

      // adds Arrows navigation control to the slider. 
      slider.control('arrows'); 

     } else { 

      var slider = new MasterSlider(); 
      slider.setup('masterslider' , { 
       width: 1440, // slider standard width 
       height: 400, // slider standard height 
       space: 5, 
       layout: 'autofill', 
      }); 

      // adds Arrows navigation control to the slider. 
      slider.control('arrows'); 

     } 
    }).resize(); 

})(jQuery); // End JQuery 

このメソッドは、コンソールで次の複数のエラーでスクリプトを複数回発射するようだ：

Uncaught TypeError: Cannot read property 'position' of undefined 

どのようにすべきです私はスクリプトを一度だけ実行し、サイズ変更時にレイアウト演算子を呼び出します。

Answer 1

他の開発者といえば、私たちは以下の解決策を考え出した：エラーを停止

(function($) { 

    var slider = new MasterSlider(); 

    var changeSetup = function(){ 

    if (Modernizr.mq('(max-width: 767px)')) { 

     slider.setup('masterslider' , { 
      width: 1440, // slider standard width 
      height: 400, // slider standard height 
      space: 5, 
      layout: 'boxed', 
     }); 

     // adds Arrows navigation control to the slider. 
     slider.control('arrows'); 
    } 

    else { 

     slider.setup('masterslider' , { 
     width: 1440, // slider standard width 
     height: 400, // slider standard height 
     space: 5, 
     layout: 'autofill', 
    }); 

    // adds Arrows navigation control to the slider. 
      slider.control('arrows'); 
     } 
    }; 

    changeSetup(); 

    $(window).resize(function(){ 
     changeSetup(); 
    }); 

})(jQuery); // End JQuery