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

它不像原来那样 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

这是旧的，但如果它有所帮助，我很确定你需要重置＆＃34; jcarousellite。否则，您将在每个窗口调整大小后反复实例化它。

要在初始化之后正确初始化它，您需要调用reset方法。我不记得我头脑中的语法，但如果你在jcarousellite.js来源搜索＆＃34;重置＆＃34;你应该找到正确的语法

jCarouselLite自动滚动响应更改

2 个答案: