Question

我在我正在建设的网站上使用this图片轮播。

如果屏幕尺寸大于768px，我希望它能够运行：

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');

如果屏幕尺寸小于768px，我希望它能够杀死之前的脚本并运行。

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');

我已尝试使用Modernizr mq实现此功能，但触发器似乎不起作用：

if (Modernizr.mq('(max-width: 767px)')) {
    // Script option 1
} else {
    // Script option 2
}

我想在视口大小调整时执行此操作并避免刷新。

我在这里做错了什么？

Answer 1

尝试修改重新调整大小事件的行为。

window.addEventListener("resize", updateLayout, false); 

function updateLayout() {
  if(window.innerWidth > 767) {
    // modify to layout one
  } else {
    // modify to other layout
  }
}

Answer 2

您应该能够通过三元运算符设置布局属性，因此您不需要指定两个单独的init函数。

var slider = new MasterSlider();
slider.setup('masterslider' , {
    width: 1440,    // slider standard width
    height: 400,   // slider standard height
    space: 5,
    layout: $(document).width() > 768 ? 'boxed' : 'autofill'
});
// adds Arrows navigation control to the slider.
slider.control('arrows');

Answer 3

试试这个解决方案：

function check_device(){
    if($(window).width() > 768){
        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');
     } //END CHECK DEVICE SIZE
}//END check_device FUNCTION

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

$(document).ready(function() {
   check_device();
});

希望它有所帮助。

文斯。

如果屏幕大小，请加载JQuery脚本

3 个答案: