JCarouselLite auto-scroll responsive changes

Question

I use jcarousel lite to display a startup logo carousel on one of my sites. I tried to make it responsive (maximum 6 images on the largest display) using the following javascript. The carousel works great using source code without trying to change the number of images.

<script> function carouselLogic(){ if ($(window).width() > 959 ){ visible = 6; changeCarousel(visible); } else if($(window).width() > 767){ visible = 4; changeCarousel(visible); } else if($(window).width() > 599){ visible = 2; changeCarousel(visible); } } carouselLogic(); $(window).resize(function(){ carouselLogic(); }); /* original function for first page load $(function() { $(".logoCarousel").jCarouselLite({ auto: 2500, speed: 1000, visible: 6 }); }); */ function changeCarousel(visible){ $(".logoCarousel").jCarouselLite({ auto: 2500, speed: 1000, visible: visible }); } </script> 

Images are displayed in a line with an edge of 20 pixels left / right.

This code should change the visible number of logos to ensure that they still fit on the page with each change.

As a result, the carousel automatically scrolls. It bounces back and forth throughout the place and is much faster than the default.

Any suggestions for improving this code?

Answer 1

The original jCarouselLite has been forked here;

https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels

This is not quite like Lite, as it was originally, but it has many other methods and is a touch screen that scrolls and is responsive. You can add the following options that work for me:

  function changeCarousel(visible){ $(".logoCarousel").jCarouselLite({ auto: true, speed: 1000, visible: visible, autoWidth: true, responsive: true }); } 

As indicated here

Run jCarouselLite again after an AJAX request

You might also want to end the original carousel in your carouselLogic() function

  $(".logoCarousel").trigger("endCarousel"); 

Answer 2

This is old, but in case it helps, I'm sure you need to "reset" jcarousellite. Otherwise, you create it again and again after each window size change.

To initialize it correctly after it has already been initialized, you need to call the reset method. I don’t remember the syntax from the top of my head, but if you are looking for the source of jcarousellite.js for "reset", you should find the correct syntax