javascript - 如何仅在平板电脑/手机上将主 slider 的布局从 'partialview' 更改为 'fillwidth'

Question

我正在使用 MasterSlider.js 制作轮播，我想在桌面上提供部分 View ，在平板电脑和移动设备上提供填充宽度 View 。我试图通过检测窗口宽度来更改它，但我的代码有问题。

<script type="text/javascript">
var slider = new MasterSlider();
        slider.setup('masterslider' , {
            width:700,
            height:466,
            space:5,
            loop:true,
            view:'fadeFlow',
            layout:'partialview',
            grabCursor:false,
            centerControls:false,
            autohide:false,
            view:"fadeBasic",

        });
        slider.control('arrows' , {autohide:false});


   if ($(window).width() < 1024) {
        slider.setup('masterslider' , {

                    layout:'fillwidth',
                    grabCursor:false,
                    centerControls:false,
                });
            }
</script>

还有一件事，我使用 fadeBasic 选项使上一个和下一个图像默认淡出，它应用 opactiy 0.4，有什么方法可以将其设为 0.8。不透明度在运行时应用。

仅供引用，我正在使用此 slider : http://www.mercurycustom.com/wp-content/uploads/2014/05/partialview/partialview3.html

这是一个正在运行的演示:http://codepen.io/anon/pen/dopNrM

Answer 1

试试这个:

var slider = new MasterSlider();
slider.control('arrows');
if ($(window).width() < 1024) {
  slider.setup('masterslider', {
    layout: 'fillwidth',
    grabCursor: false,
    centerControls: false,
  });
} else {
  slider.setup('masterslider', {
    width: 760,
    height: 400,
    space: 10,
    loop: true,
    view: 'fadeFlow',
    layout: 'partialview',
  });
}