在单张幻灯片的自动播放模式下使用 slick.js

Question

我想将 slick.js 用于简单的新闻行情。所以我有一个框，其中文本来自右侧并在循环中自动滚动到左侧。问题是如果只有一张幻灯片，slick.js 拒绝移动文本。我希望幻灯片从右向左移动，经过左边缘后它应该再次从右开始移动。有谁知道如何实现这一目标？这里有一点 fiddle 显示了我的问题。它使用此 javascript 代码：

$(function(){
    $('.slider').slick({
        speed: 10000,
        autoplay: true,
        autoplaySpeed: 0,
        cssEase: 'linear',
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true,
        infinite: true
    });
});

Answer 1

看起来 slick carousel 并不是为仅使用一个元素而构建的。如何使用 jQuery 克隆您的幻灯片一次以便插件工作？请参阅下面的功能示例：

$(function() {
  if ($('.slider div').length == 1) {
      $('.slider div').clone().appendTo('.slider');
  }
  $('.slider').slick({
    speed: 10000,
    autoplay: true,
    autoplaySpeed: 0,
    cssEase: 'linear',
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: true,
    infinite: true
  });
});

img {
  margin: 10px;
  border: 1px solid black;
}

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>

<section class="slider">
  <div>
    <img src="http://placehold.it/350x150" />
  </div>
</section>

Answer 2

乔恩的回答很好，但它会给你两张相同的幻灯片，你可以滑动（更改）。如果您希望在不克隆的情况下显示单张幻灯片，您可以使用 initialSlide 设置。

$(function() {
    var start = 0;

  if ($('.slider div').length == 1) {
      start = -1;
  }

  $('.slider').slick({
    speed: 10000,
    autoplay: true,
    autoplaySpeed: 0,
    cssEase: 'linear',
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: true,
    infinite: true,
    initialSlide: start
  });
});

在单张幻灯片的自动播放模式下使用 slick.js

Using slick.js in autoplay mode for a single slide

javascript

jquery

slick.js