首先:我不喜欢 JavaScript/JQuery! …但我会尽力指出我想做什么。
我在我的页面上使用了很棒的 bx-slider,并且我通过媒体查询使我的网站具有响应能力,到目前为止,这两者都运行良好。 …但是 bx-slider-script 中有一些功能我不想在特定的浏览器宽度上激活。这就是我想要的:
浏览器宽度低于 500px = 加载此函数:
$('#slider4').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: 230,
slideMargin: 10,
nextSelector: '#next',
prevSelector: '#prev',
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
useCSS: false,
easing: 'easeInOutExpo',
speed: 1000
});
浏览器宽度高于 500px = 隐藏上面的功能并加载此功能:
$('#slider4').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 230,
slideMargin: 20,
nextSelector: '#next',
prevSelector: '#prev',
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
useCSS: false,
easing: 'easeInOutExpo',
speed: 1000
});
...这在 JavaScript 中可能吗?我尝试了一些使用断点的脚本,但我认为我的 JS 知识太弱,无法让它按我想要的方式工作。
如果有人可以向我展示如何轻松地做到这一点,那就太好了!
最佳答案
If($(document).width() < 500){
...
}else{
...
}
您可能还想放入 onchange 事件
$( window ).resize(function() {
resizefunction();
});
关于javascript - 响应式 JavaScript – 加载/隐藏与浏览器宽度相关的特定功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19422264/