javascript - jCarouselLite 自动滚动响应变化

Question

我正在使用 jcarousel lite在我的网站之一上显示自动滚动的品牌 Logo 轮播。我尝试使用以下 javascript 使其响应(最大显示器上最多 6 张图像)。轮播使用原始代码工作正常，无需我尝试修改可见的图像数量。

<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>

图像显示为内联，左/右边距为 20 像素。

此代码应该更改 Logo 的可见数量，以确保它们在每次响应更改时仍适合页面。

结果是轮播自动滚动变得疯狂。它到处来回弹跳，比默认速度快得多。

关于如何改进此代码的任何建议？

Answer 1

原来的jCarouselLite已经在这里 fork 了；

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

它不像最初那样精简，但它有更多的方法，并且可以触摸屏滚动和响应。您可以添加以下对我有用的选项；

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

正如此处指出的，

Run jCarouselLite again, after an AJAX request

您可能还想在 carouselLogic() 函数中结束原始轮播

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