我正在使用MasterSlider.js制作圆盘,我想在桌面上给它部分视图,在平板电脑和手机上给它fillwidth视图。我正在尝试通过检测窗口宽度来更改它,但是我的代码有问题。
<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。不透明度适用于运行时。
仅供参考,我正在使用此滑块:
http://www.mercurycustom.com/wp-content/uploads/2014/05/partialview/partialview3.html
这是一个正在运行的演示:http://codepen.io/anon/pen/dopNrM
最佳答案
尝试以下方法:
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',
});
}