Question

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

fs/proc/internal.h

Answer 1

看起来光滑的旋转木马不能仅与一个元素一起使用。如何使用jQuery克隆你的幻灯片，以便插件工作？见下面的功能示例：

＆＃13;

$(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
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

Jon的答案很好，但是它会给你两个相同的幻灯片，你可以滑动（改变）。如果您希望在没有克隆的情况下显示单张幻灯片，可以使用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进行单张幻灯片

2 个答案: