How to modify Jquery auto scroll parameter during screen resize event?

Question

I'm using jCarouselLite to show featured listing slides. I would like to change 'visible: no_of_slides' parameter during screen resize event. I wrote the code below, however when the browser is resized, the auto scroll doesn't run properly anymore, it goes left and right and jumps around quickly.

Thats to say the code below is not correct and i will be greatful if anyone improved it or advised a better way.

<script>
        window.addEventListener("resize", displayViewportSize, false);
        displayViewportSize(null);

        function displayViewportSize(e) {
            var nslides;

            if (920 < document.body.clientWidth){
                nslides = 5;
            } else if (850 < document.body.clientWidth) {
                nslides = 4;
            } else if (700 < document.body.clientWidth) {
                nslides = 3;
            } else if (550 < document.body.clientWidth) {
                nslides = 2;
            } else {
                nslides = 1;
            }

            /* featured listings slider */
    jQuery(document).ready(function($) {
        $('div.slider').jCarouselLite({
            btnNext: '.next',
            btnPrev: '.prev',
            autoWidth: true,
            responsive: true,
            pause: true,
            auto: true,
            timeout: 2800,
            speed: 800,
                            visible: nslides,
            init: function() {
                $('div.slider').fadeIn();
            },
            easing: 'easeOutQuint' // for different types of easing, see easing.js
        });
    });

        }

</script>

Answer 1

You need to use media queries and responsive way to take what you try to do.

 (function($) { $(function() { var jcarousel = $('.jcarousel'); jcarousel .on('jcarousel:reload jcarousel:create', function () { var carousel = $(this), width = carousel.innerWidth(); if (width >= 600) { width = width / 3; } else if (width >= 350) { width = width / 2; } carousel.jcarousel('items').css('width', Math.ceil(width) + 'px'); }) .jcarousel({ wrap: 'circular' }); $('.jcarousel-control-prev') .jcarouselControl({ target: '-=1' }); $('.jcarousel-control-next') .jcarouselControl({ target: '+=1' }); $('.jcarousel-pagination') .on('jcarouselpagination:active', 'a', function() { $(this).addClass('active'); }) .on('jcarouselpagination:inactive', 'a', function() { $(this).removeClass('active'); }) .on('click', function(e) { e.preventDefault(); }) .jcarouselPagination({ perPage: 1, item: function(page) { return '<a href="#' + page + '">' + page + '</a>'; } }); $('.jcarousel').jcarouselAutoscroll({ interval: 3000, autostart: true }); }); })(jQuery); 

 /** page **/ body { background: #ccc; margin: 0; padding: 0; font: 15px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #4E443C; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } h1, h2, h3, h4, h5, h6 { font-family: 'Arvo', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-weight: normal; text-rendering: optimizelegibility; } h1 { color: #4E443C; font-size: 36px; font-weight: bold; } h2, h2 a { color: #F14E32; } h3, h3 a { color: #0388A6; } a { color: #0388A6; } pre { border:1px solid #000; overflow-x:auto; background: #222; color: #fff; text-shadow: none; } .wrapper { max-width: 620px; padding: 0 20px 40px 20px; margin: auto; } /** jcarousel **/ .jcarousel-wrapper { margin: 20px auto; position: relative; border: 10px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 2px #999; -moz-box-shadow: 0 0 2px #999; box-shadow: 0 0 2px #999; } /** Carousel **/ .jcarousel { position: relative; overflow: hidden; width: 100%; } .jcarousel ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; } .jcarousel li { width: 200px; float: left; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .jcarousel img { display: block; max-width: 100%; height: auto !important; } /** Carousel Controls **/ .jcarousel-control-prev, .jcarousel-control-next { position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; text-align: center; background: #4E443C; color: #fff; text-decoration: none; text-shadow: 0 0 1px #000; font: 24px/27px Arial, sans-serif; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 4px #F0EFE7; -moz-box-shadow: 0 0 4px #F0EFE7; box-shadow: 0 0 4px #F0EFE7; } .jcarousel-control-prev { left: 15px; } .jcarousel-control-next { right: 15px; } /** Carousel Pagination **/ .jcarousel-pagination { position: absolute; bottom: -40px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); margin: 0; } .jcarousel-pagination a { text-decoration: none; display: inline-block; font-size: 11px; height: 10px; width: 10px; line-height: 10px; background: #fff; color: #4E443C; border-radius: 10px; text-indent: -9999px; margin-right: 7px; -webkit-box-shadow: 0 0 2px #4E443C; -moz-box-shadow: 0 0 2px #4E443C; box-shadow: 0 0 2px #4E443C; } .jcarousel-pagination a.active { background: #4E443C; color: #fff; opacity: 1; -webkit-box-shadow: 0 0 2px #F0EFE7; -moz-box-shadow: 0 0 2px #F0EFE7; box-shadow: 0 0 2px #F0EFE7; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.5/jquery.jcarousel.min.js"></script> <div class="wrapper"> <h1>Responsive Carousel</h1> <p>Tresponsive carousel. Resize the browser window to see the effect.</p> <div class="jcarousel-wrapper"> <div class="jcarousel"> <ul> <li><img src="http://lorempixel.com/400/200?1" alt="Image 1"></li> <li><img src="http://lorempixel.com/400/200?2" alt="Image 2"></li> <li><img src="http://lorempixel.com/400/200?3" alt="Image 3"></li> <li><img src="http://lorempixel.com/400/200?4" alt="Image 4"></li> <li><img src="http://lorempixel.com/400/200?5" alt="Image 5"></li> <li><img src="http://lorempixel.com/400/200?6" alt="Image 6"></li> </ul> </div> <a href="#" class="jcarousel-control-prev">&lsaquo;</a> <a href="#" class="jcarousel-control-next">&rsaquo;</a> <p class="jcarousel-pagination"></p> </div> </div>