响应式JavaScript – 加载/隐藏与浏览器宽度相关的特定function?

首先:我不是JavaScript / JQuery! ……但我会试着指出我想做什么。

我正在我的页面上使用梦幻般的bx滑块,我通过媒体查询使我的网站响应,这两个目前都很好。 …但是bx-slider-script中有一些function我不想在特定的浏览器宽度上激活。 这就是我想要的:

browser-width LOWER比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{ ... } 

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

您可能还想要进行onchange事件

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

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