Setting the number of jCarousel elements depending on screen resolution

Let's assume you have a page design that has some sort of image or blocks carouselle and implies that you display two pictures (or functional blocks) on relatively small screens (like 1024px) for them to simply fit in by width, and three or more blocks on larger screens where there is enough horizontal space.

This is easily achieved by means of jCarousel and jQuery.

Let's take a sample code from this page and enhance it a little bit.

In sample code we have this piece:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
});

What we are going to do here is adding just a couple more lines:

jQuery(document).ready(function() {

var t = $(window).width();
/* alert(t); // to see the actial width in pixel for debugging and fine-tuning purposes */

 if (t<1280) jQuery('#mycarousel').jcarousel({
        visible: 2
    }); else jQuery('#mycarousel').jcarousel({
        visible: 3
        }); 
});

Now if you switch your display or resolution in your Web Developer toolbar and reload the page you will be able to see the actual result:

• on 1279px or less there will be two blocks with images in the carousel
• on 1280+ there will be three of them

Of course my sample just illustrates the solution of a single problem so I wasn't doing anything for my own carousel to look neat (because 'borrowing' others' styles and pics is generally bad and specifically quite ungrateful but whatcha gonna do). Still I hope it works the way in was intended to anyway.

Good luck with riding your own carousel!