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>

图像以 20 像素左右的边距内嵌显示。

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

结果是轮播自动滚动变得疯狂。它在整个地方来回弹跳，而且比默认的要快得多。

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

Answer 1

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

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

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

  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");

Answer 2

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

要在它已经初始化后正确初始化它，你需要调用一个reset方法。我不记得我脑海中浮现的语法，但是如果您在 jcarousellite.js 源中搜索“reset”，您应该会找到正确的语法