Responsive JavaScript – load/hide specific function related to browser width?

问题

first fo all: i'm not into JavaScript/JQuery! …but i will try to point out what i want to do.

i'm using the fantastic bx-slider on my page and i made my website responsive via media queries which both works great so far. …but there are some features from the bx-slider-script which i don't want to get active on a specific browser-width. here's what i want:

browser-width LOWER than 500px = load this 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 the function above and load this one:

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

…is that even possible in JavaScript? I tried some scripts which are using breaking points but it think my JS-knowledge is to weak to get this to work as i want.

It would be great if there's someone out here which can show me how to do this easily!

回答1:

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

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

You may also want to put in an onchange event

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

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

来源：https://stackoverflow.com/questions/19422264/responsive-javascript-load-hide-specific-function-related-to-browser-width

标签

javascript

jquery

function

responsive-design

bxslider