有问题的图像轮播环绕答案

【问题标题】：Problematic image carousel wrap-around有问题的图像轮播环绕
【发布时间】：2015-11-13 20:08:03
【问题描述】：

旋转木马不能很好地环绕。

如果我继续点击右键，最后显示的图像将是第一个。然后我必须再单击四次，此时此图像将位于轮播的最左侧。右侧没有显示图像。然后突然之间，它们都同时出现了。当轮播重新开始时会发生这种情况。

我希望“过渡 2”框架的右侧会出现“Img #2”，依此类推。

我试过了

关闭或打开自动播放设置
关闭或打开无限远设置
调整 slidesToShow 设置并增加它会有所帮助，但由于我有可变宽度的图像和响应式设计，因此此设置将仅在较小的屏幕上显示少量图像
它在最新的 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;
}

【问题讨论】：

请添加 JSFiddle 以便我们检查您的代码
您是否能够解决问题，或者您是否最终使用了 Bootstrap 轮播？
我保持原样，直到它让我烦恼到足以修复它或推出我自己的解决方案。我不能使用 Bootstrap 轮播，因为它不能很好地支持我的用例。

标签： twitter-bootstrap-3 carousel slick.js

【解决方案1】：

我不熟悉 slick carousel，但我建议通过创建 slick carousel 来消除尽可能多的未知因素，而不涉及任何引导程序或无关的自定义 CSS。如果您发现轮播在没有引导/自定义 css 的情况下按预期工作，那么您知道某些 CSS 与 slick 冲突。否则，您的巧妙设置一定有问题。

我确定您已经查看了 slick 的所有配置选项... http://kenwheeler.github.io/slick/

此外，slick 似乎有一些很好的用途，但我在使用引导轮播方面取得了很大的成功。如果 slick 不起作用，可能值得一试。 http://getbootstrap.com/javascript/#carousel

【讨论】：

【解决方案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
});

【讨论】：

仅仅使用“3”并不能解决问题。我试过将引用的设置与我的结合起来，但没有运气。然而删除variableWidth: true确实解决了原来的问题，但现在我所有的图像都被拉伸和丑陋了。

【解决方案3】：

当您在 'centerMode' 开启的情况下获得偶数 'slidesToShow' 时，可能会发生这种情况

【讨论】：