4

我正在使用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 像素的边距显示为内联。

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

结果是轮播自动滚动变得疯狂。它在各处来回弹跳，并且比默认设置要快得多。

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

4

2 回答 2

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");
于 2016-05-12T15:22:23.417 回答
-1

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

要在初始化后正确初始化它，您需要调用重置方法。我不记得我脑海中的语法，但是如果您搜索jcarousellite.js“重置”的源代码，您应该会找到正确的语法

于 2014-07-21T18:41:31.120 回答