CODEWITHSUNDEEP
jqueryjcarousellite
ThinkingInBits
ThinkingInBits

Reputation: 11432

jCarouselLite Setting number of visible items dynamically

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?

Upvotes: 0

Views: 3118

Answers (1)

AdityaSaxena
AdityaSaxena

Reputation: 2157

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>

Upvotes: 1

Related Questions