Responsive JavaScript – carica / nasconde una function specifica relativa alla width del browser?

prima per tutti: non sono in JavaScript / JQuery! … ma cercherò di mettere in evidenza quello che voglio fare.

sto usando il fantastico bx-slider sulla mia pagina e ho reso il mio sito web sensibile tramite query multimediali che funzionano entrambe finora. … ma ci sono alcune caratteristiche dello script bx-slider che non voglio avere attivo su una vasta width di browser. ecco quello che voglio:

width-width inferiore a 500px = carica questa function:

$('#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 }); 

browser-width HIGHER than 500px = hide la function sopra e caricare questo:

 $('#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 }); 

… è anche ansible in JavaScript? Ho provato alcuni script che stanno utilizzando punti di rottura ma credo che la mia conoscenza di JS sia debole per far funzionare questo come voglio.

Sarebbe fantastico se qualcuno qui potesse mostrarmi come farlo facilmente!

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

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

Potresti anche voler mettere in un evento di scambio

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

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