jcarousel和响应式布局

Question

我有jcarousel，我设法让他显示8个元素。现在我想要调整浏览器的大小时，甚至可以调整jcarousel的大小，否则jcarousel会从浏览器空间中跳出。 我试试做：

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

在头上。但它似乎并不奏效。 如果浏览器变得太小（例如在手机上查看），最好让jcarousel消失并查看项目列表？ 与@media？ 因为即使图库中的图像是100px 100px始终。如有必要，我可以提供一个例子。

现在尝试这样的事情： $（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" 
    }); 
} 
}); 

它的作品，但我有一个问题，因为它显示我只是，我可以看到我的时候周期的元素。 而不是每个元素 另一个奇怪的事情，因为JcarouselLite代码剩下：0，似乎我不能添加箭头附近的jcarousel。

Answer 1

看起来你想要做的事情可以通过使用非精简版jCarousel来解决。我认为使用lite版本并不容易。

它们提供responsive example。