jQuery - bxSlider resize screen and change slider settings

Question

When the viewport size is 600px+ I want the slider to display 3 items and when the viewport is less than 600px I want the slider to display only one item

But at the moment I have a problem when the screen is resized to less then 600px and then increased its not reloading the slider with the correct settings (3 slides)

Does anyone know what the problem may be please? I have set up a fiddle below

http://jsfiddle.net/e2RaE/

news3col = $('ul').bxSlider({
    slideWidth: 500,
    minSlides: 3,
    maxSlides: 3,
    slideMargin: 30
});

function checkMq() {
    if (Modernizr.mq('only screen and (max-width: 599px)')) {
        $('div').css('background-color', 'lightblue');
        news3col.reloadSlider({
            minSlides: 1,
            maxSlides: 1
        });
    }
    if (Modernizr.mq('only screen and (min-width: 600px)')) {
        $('div').css('background-color', 'lightgreen');
        news3col.reloadSlider();
    }
}

$(function () {
    // the call to checkMq here will execute after the document has loaded
    checkMq();
    $(window).resize(function () {
        // the call to checkMq here will execute every time the window is resized
        checkMq();
    });
});

Answer 1

I dunno if it's a litle too late for you since the post is about 2 months old, but recently I've had a similar thing I had to do for one of my sites as well, and instead of using Modernizr to detect the width of the screen/media query the user is currently, try checking for the width of the window using jQuery's width() on the window element.

So instead of,

    function checkMq() {
    if (Modernizr.mq('only screen and (max-width: 599px)')) {
        $('div').css('background-color', 'lightblue');
        news3col.reloadSlider({
            minSlides: 1,
            maxSlides: 1
        });
    }
    if (Modernizr.mq('only screen and (min-width: 600px)')) {
        $('div').css('background-color', 'lightgreen');
        news3col.reloadSlider();
    }
}

You should try using:

function checkMq() {
    if ($(window).width() <= 599) {
        $('div').css('background-color', 'lightblue');
        news3col.reloadSlider({
            minSlides: 1,
            maxSlides: 1
        });
    }
    if ($(window).width() >= 600) {
        $('div').css('background-color', 'lightgreen');
        news3col.reloadSlider({
            minSlides: 3,
            maxSlides: 3
        });
    }
}

Try and see if that works.