javascript - 响应式 JavaScript – 加载/隐藏与浏览器宽度相关的特定功能？

Question

首先:我不喜欢 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 知识太弱，无法让它按我想要的方式工作。

如果有人可以向我展示如何轻松地做到这一点，那就太好了!

Answer 1

If($(document).width() < 500){
...
}else{
...
}

http://api.jquery.com/width/

您可能还想放入 onchange 事件

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

http://api.jquery.com/resize/