在自动播放模式下使用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

看起来像光滑轮播不是只与一个元素一起工作。如何使用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 
    }); 
});