jcarousel and responsive layout

Question

I have jcarousel and i manage to make him display 8 elements. Now i want when i resize the browser, even jcarousel resize, because otherwise jcarousel bar go out from the browser space. I try to do:

  $( window ).resize(function() {
        $("#Carousel").jcarouselLite({
                visible: 5                    
        });
  });

In the head. But it doesn't seems to work. if the browser became too small (e.g. viewed on a phone) it's better to make jcarousel disappear and view a list of item? with @media? Because even the image in the gallery is 100px 100px Always. I can provide an example if necessary.

tried now with something like this too: $(window).trigger('resize');

 $(window).resize(function(){
if($(window).width() > 300 && $(window).width() < 500){
    $('.next, .prev').unbind('click');
    $('.image-gallery').jCarouselLite({
        visible: 3.5,
        btnNext: ".next",
        btnPrev: ".prev"
    });
}
else if($(window).width() > 500 && $(window).width() < 700){
    $('.next, .prev').unbind('click');
    $('.image-gallery').jCarouselLite({
        visible: 4.5,
        btnNext: ".next",
        btnPrev: ".prev"
    });
}
else if($(window).width() > 700 && $(window).width() < 900){
    $('.next, .prev').unbind('click');
    $('.image-gallery').jCarouselLite({
        visible: 5,
        btnNext: ".next",
        btnPrev: ".prev"
    });
}
    else if($(window).width() > 1000){
    $('.next, .prev').unbind('click');
    $('.image-gallery').jCarouselLite({
        visible: 6,
        btnNext: ".next",
        btnPrev: ".prev"
    });
}
 });

It Works, but i have a problem because it shows me just the element i can see when i cycle. and not every element Another weird thing, since JcarouselLite code is left:0, it seems i can't add Arrow around jcarousel.

Answer 1

It seems like what you're trying to do can be solved by using the non-lite version jCarousel. I don't think it's easy to do with the lite version.

They provide a responsive example.