jCarouselLite 自动滚动响应更改

Question

我正在使用 jcarousel lite 在我的一个网站上显示品牌徽标的自动滚动轮播。我尝试使用以下 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>

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

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

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

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

Answer 1

原来的 jCarouselLite 已经在这里分叉了;

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

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

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

正如这里指出的，

在 AJAX 请求后再次运行 jCarouselLite

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

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

Answer 2

这很旧，但如果它有帮助，我很确定你需要"重置"jcarousellite。否则，您将在每次调整窗口大小后一次又一次地实例化它。

若要在初始化

后正确初始化它，需要调用 reset 方法。我不记得我的头顶上的语法，但是如果您在jcarousellite.js源中搜索"重置"，您应该找到正确的语法