javascript - レスポンシブ JavaScript – ブラウザーの幅に関連する特定の機能をロード/非表示にしますか?

Question

まず最初に: 私は JavaScript/JQuery には興味がありません! …しかし、私がやりたいことを指摘しようとします。

私は自分のページで素晴らしい bx-slider を使用しており、メディア クエリを介して Web サイトをレスポンシブにしました。…しかし、bx-slider-script には、特定のブラウザー幅でアクティブにしたくない機能がいくつかあります。ここに私が欲しいものがあります:

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
});

browser-width が 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 の知識が弱すぎると思います。

これを簡単に行う方法を教えてくれる人がここにいれば素晴らしいことです!