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.
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.