【问题标题】：jCarouselLite Setting number of visible items dynamicallyjCarouselLite 动态设置可见项目的数量
【发布时间】：2013-08-22 05:22:32
【问题描述】：

我正在尝试在我的项目中使用 jQuery jCarouselLite，但似乎没有办法根据屏幕大小动态更改“可见”选项。是否可以更改原始配置参数并立即在 UI 中看到更改？

【问题讨论】：

请展示一些代码以正确了解您的问题
我的问题是我无法弄清楚如何更改原始配置的值，然后在 UI 中查看更改。我没有值得展示的代码，在查看源代码和谷歌搜索后，我所尝试的一切完全是一时兴起，但无济于事。
在插件 js 文件中查看默认值，您可以设置所需的更改
您能提供一些额外的信息吗？我不确定你的意思。
抱歉，这可能不清楚......但我希望根据屏幕调整大小动态地执行此操作。比如，有没有办法访问 jQueryLite 对象，设置新的可见项数量，然后刷新轮播？

标签： jquery jcarousellite

【解决方案1】：

你会这样做：

JSFIDDLE

尝试在小提琴中调整 RESULT 窗口的大小以查看它的效果

JS：

    $(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 5
    });
});

$(window).trigger('resize');

$(window).resize(function(){
    if($(window).width() > 300 && $(window).width() < 400){
        $('.next, .prev').unbind('click');
        $('.anyClass').jCarouselLite({
            visible: 3.5,
            btnNext: ".next",
            btnPrev: ".prev"
        });
    }
    else if($(window).width() > 400 && $(window).width() < 500){
        $('.next, .prev').unbind('click');
        $('.anyClass').jCarouselLite({
            visible: 4.5,
            btnNext: ".next",
            btnPrev: ".prev"
        });
    }
    else if($(window).width() >= 500){
        $('.next, .prev').unbind('click');
        $('.anyClass').jCarouselLite({
            visible: 5,
            btnNext: ".next",
            btnPrev: ".prev"
        });
    }
});

HTML：

<button class="prev"><<</button>
<button class="next">>></button>

<div class="anyClass">
    <ul>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
            <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
            <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
        <li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
    </ul>
</div>

【讨论】：

这太接近了。请注意，如果您将轮播向右移动几次，然后调整它的大小，然后再次向右击，它会像 3 张幻灯片一样通过，我想回到幻灯片 1。
酷..有你的问题。修复它并更新了小提琴。基本上，我还必须更新按钮的点击处理程序。因此，我首先取消绑定关联的点击，然后使用 jCarouselLite 插件再次绑定它们