jQuery: media queries for carousel

Question

Wondering if there's a solution for this, can't seem to figure it out, I'm looking for the jQuery equivalent of media queries to change the function of a carousel I've got setup.
The code is quite simple:

$(window).load(function () {
    $(function () {
        $(".events-slider").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            scroll: 3,
            speed: 800
        });
    });
});

But I have some css media queries set up, whereby at 900px the .event-slider reduces in size, thus now only showing 1 slide as apposed to 3, I therefore want to change the jQuery function to reflect this, ie when the browser window reduces below 900px the scroll: 3, attribute changes to scroll: 1, if this is at all possible? Any suggestions would be greatly appreciated!

Answer 1

You can use the jQuery .width() function on $(window) to find the width of the browser's viewport, similar to the solution to this thread:

jQuery: How to detect window width on the fly?

$(document).ready(function() {
var window = $(window);

function checkWindowWidth() {
    var windowsize = window.width();
    if (windowsize > 900) {
        $(function () {
            $(".events-slider").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                scroll: 3,
                speed: 800
            });
        });
    } else {
        $(function () {
            $(".events-slider").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                scroll: 1,
                speed: 800
            });
        });
    }
}
checkWindowWidth();
$(window).resize(checkWidth);
});