jCarouselLite Setting number of visible items dynamically

0
votes

I'm attempting to use jQuery jCarouselLite in my project, but there does not seem to be a way to change the "visible" option dynamically based on screen size. Is it possible to change the original configuration parameters and see the changes in the UI immediately?

1
jqueryjcarousellite
please show some code by which get proper idea of your problem - Rituraj ratan
My problem is that I cant figure out how to change the values of the original configuration, and then see the changes in the UI thereafter. I have no code worth showing, everything I've tried has been completely on a whim after looking at source code and googling, but to no avail. - ThinkingInBits
see in plugin js file defaults in this you can set your desired changes - Rituraj ratan
Could you provide some additional information? I'm not sure what you mean. - ThinkingInBits
Sorry maybe this was unclear... but I'm looking to do this dynamically based on a screen-resize. Like, is there a way to access the jQueryLite object, set a new number of visible items, then refresh the carousel? - ThinkingInBits

1 Answers

1
votes

Here is how you'd do it :

JSFIDDLE

Try resizing the RESULT window in the fiddle to see it in effect

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>