jcarousel 和响应式布局答案

【问题标题】：jcarousel and responsive layoutjcarousel 和响应式布局
【发布时间】：2014-02-26 11:45:42
【问题描述】：

我有 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 代码是 left:0，所以我似乎无法在 jcarousel 周围添加箭头。

【问题讨论】：

标签： html css jcarousellite

【解决方案1】：

您尝试做的事情似乎可以通过使用非精简版jCarousel 来解决。我认为使用精简版并不容易。

他们提供responsive example。

【讨论】：