在自动播放模式下使用Slick.js进行单个幻灯片

Question

我想将slick.js用于简单的新闻股票。因此，我有一个盒子，文字来自右侧，并在循环中自动向左滚动。问题在于，如果只有一张幻灯片，Slick.js拒绝移动文本。我希望幻灯片从右侧向左移动，然后经过左边缘后，它应该再次从右开始移动。有人知道如何实现这一目标吗？这是一个小小的小提琴，表现出我的问题。它使用此JavaScript代码：

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

Answer 1

看起来光滑的旋转木马不是仅与一个元素一起使用的。如何使用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
  });
});