有问题的图像轮播环绕

Question

旋转木马不能很好地包裹。

如果我一直点击右键，最后显示的图像将是第一个。然后我必须再点击四次，此时此图像将位于旋转木马的最左侧。右侧没有显示图像。然后他们突然一下子出现了。这种情况发生在旋转木马重新开始时。

我希望“Transition 2”框架在右侧有“Img＃2”，依此类推。

我试过

• 关闭或打开自动播放设置
• 关闭或打开无限远设置
• 摆弄slideToShow设置，并增加它可以提供帮助，但由于我有可变宽度图像和响应式设计，此设置将在较小的屏幕上仅显示少量图像
• 最新的Chrome和FF

我使用slick.js 1.5.8进行以下设置：

  $("#myslick").slick({
    autoplay: true,
    variableWidth: true
  });

使用以下HTML（光滑的轮播在Bootstrap 3容器中）：

<div class="container">
    <div id="myslick">
        a few <img> tags with variable dimensions
    </div>
</div>

我使用包含的CSS主题文件，但添加了以下内容

.slick-slide {
    height: 100px;
    margin: 0 15px;
}

Answer 1

我不熟悉光滑的旋转木马，但我建议通过创建光滑的旋转木马来尽可能多地删除未知数，而不需要任何引导程序或无关的自定义CSS。如果您发现轮播在没有bootstrap / custom css的情况下按预期工作，那么您就知道某些CSS与光滑冲突。否则，你的光滑设置肯定有问题。

我确定你已查看了所有配置选项光滑... http://kenwheeler.github.io/slick/

此外，它似乎有一些很好的用途，但我使用bootstrap轮播已经取得了很大的成功。如果光滑没有成功，可能值得一试。 http://getbootstrap.com/javascript/#carousel

Answer 2

slick具有slidesToShow设置，默认为1.您想将该设置更改为“3”。查看此处的“多项”设置：http://kenwheeler.github.io/slick/，其中包含以下代码：

$('.multiple-items').slick({
 infinite: true,     // Keep on looping
 slidesToShow: 3,    // Number of slides to show at one time
 slidesToScroll: 3   // Number of slides to scroll per click
});

Answer 3

当您打开“ centerMode”打开了偶数“ slidesToShow”时，就会发生这种情况