1つのスライドに自動再生モードでのslick.jsの使用

Question

単純なニュースティッカーにslick.jsを使用したいと思います。だから私はテキストが右から来て、ループの中で自動的に左にスクロールするボックスを持っています。問題は、スライドが1つしかない場合、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

Jonの答えは良いですが、それはあなたがスライド（変化する）ことができる2枚の同じスライドを与えるだろう。複製せずに1つのスライドを表示する場合は、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 
    }); 
});