有问题的图像轮播环绕

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

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

我确信您已经浏览了 slick 的所有配置选项... http://kenwheeler.github.io/slick/

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