Question

我有jcarousel，我设法让他显示8个元素。现在我想要我调整浏览器的大小，甚至jcarousel调整大小，因为否则jcarousel栏从浏览器空间出去。我试着这样做：

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

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

现在尝试使用类似的东西： $（窗口）.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周围添加箭头。

Answer 1

使用非精简版jCarousel似乎可以解决您尝试做的事情。我不认为使用Lite版本很容易。

他们提供responsive example。

jcarousel和响应式布局

1 个答案: