旋转木马和响应式布局

Question

我有旋转木马，我设法让他展示了8个元素。现在，我希望在调整浏览器大小时，甚至调整jcarousel的大小，因为否则jcarousel栏就会从浏览器空间中消失。我试着做：

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

头部受伤。但这似乎行不通。如果浏览器变得太小(例如在手机上观看)，最好让jcarousel消失并查看项目列表？用@媒体？因为连图片库中的图像都是100 px100 in。如有需要，我可以提供一个例子。

现在也尝试过这样的方法：$(Window).trigger(“调整大小”)；

 $(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"
    });
}
 });

它工作，但我有一个问题，因为它只显示了我可以看到的元素，当我循环。而且并不是每个元素都是另一个奇怪的东西，因为JcarouselLite代码被留下了:0，看来我不能在jcarousel周围添加Arrow。

Answer 1

似乎你想要做的事情可以通过使用非轻版本的jCarousel来解决。我不认为这是很容易用精巧的版本。

他们提供一个响应实例。