carousellite - specify slides visible by device width

Question

I am afraid I am not very good at javascript and would really appreciate a guiding hand.

Using jcarousellite this code goes at the top of the body:

<script type="text/javascript">
$(function() {
$(".carousellite").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    auto: 1200,
    speed: 3000,
    easing: "easeInOutExpo",
    visible: 5,
    pauseOnMouseOver: true, // This is the configuration parameter
    circular: true
});    
});
</script>

I wish the value of the number visible to be 1 if device width <=480px and 5 if more.

I have tried using code such as this in the above expression with no success:

if ($(window).width() < 480) {
   $(".carousellite").jCarouselLite({visible: 1});
}
else {
   $(".carousellite").jCarouselLite({visible: 5});
}

I would be so grateful for some help.

Thank you!

Jonathan

score 0 · Answer 1 · answered Feb 23 '14 at 15:30

I have found my own solution

    <script>
    setTimeout(function(){
        if (screen.width < 480 ){
            //scripts for smaller screens
            $(".carousellite").jCarouselLite({
    visible: 1
    });
        }
    },300)
</script>

Thanks to: http://scriptcult.com/subcategory_1/article_856-get-device-width-screen-width-on-mobile-devices.html

carousellite - specify slides visible by device width

1 Answers1