jCarouselLite动态设置可见项目数

Question

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

Answer 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>