4

I'm using jcarousel lite to display an auto-scrolling carousel of brand logos on one of my sites. I tried to make it responsive (max 6 images on largest display) using the following javascript. The carousel works fine using the original code without me trying to modify how many images are visible.

<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 appear inline with a 20px margin left/right.

This code is supposed to change the visible number of logos to ensure they still fit on the page with each responsive change.

The result is the carousels auto scroll goes all crazy. It bounces back and forth all over the place, and much quicker than the default.

Any suggestions on how to improve this code?

gan
  • 3,068
  • 2
  • 19
  • 32

2 Answers2

1

The original jCarouselLite has been forked here;

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

It's not quite as Lite as it originally was but it has many more methods, and is touch screen scrollable and responsive. You can add the following options which are working for me;

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

As pointed out here,

Run jCarouselLite again, after an AJAX request

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

  $(".logoCarousel").trigger("endCarousel");
Community
  • 1
  • 1
McNab
  • 6,767
  • 4
  • 35
  • 55
-1

This is old but in case it helps, i'm pretty sure you need to "reset" jcarousellite. Otherwise you are instantiating it again and again after each window resize.

To initialize it properly after it has already been initialized, you need to call a reset method. I don't remember the syntax off the top of my head, but if you search the jcarousellite.js source for "reset" you should find the correct syntax

ebo
  • 2,717
  • 1
  • 27
  • 22
elproduc3r
  • 1
  • This is just a complete guess. There is no `reset` method in the original jcarousellite or the updated version by Karl Svedberg - https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels – McNab May 12 '16 at 14:37