Slick.jsのオプションrtlについて

jQuery初心者です。
カルーセルスライダーを設置したいと思い、Slickを使用しているのですが
オプションの設定が上手くいきません。

「画像を3枚表示、1枚ずつ送りでオートプレイ」までは設定しても動作したのですが、
そのオートプレイで流れる方向をデフォルトの右→左から左→右にしたいと思い
rtl:true,を追加すると、画像が表示されなくなります（左右の矢印は表示されます）。
左矢印を押すと一応1枚目の画像が右からスクロールされてきますが、画像が表示しきったところで消えてしまいます。
rtl:true,を削除すれば正常に動作します。

そもそもrtlはオートプレイの動作方向を指定するものではないのでしょうか？
自力で色々調べてみましたが、解決できないので質問させていただきました。

以下、HTMLのスクリプト部分です。
ご回答よろしくお願いします。


<script>
　$("document").ready(function(){
　　$('.carousel1').slick({
　　　infinite: true,
　　　dots: true,
　　　slidesToShow: 3,
　　　slidesToScroll: 1,
　　　rtl: true,
　　　autoplay: true,
　　　autoplaySpeed: 1500
　　});
　});
</script>

No.1 ベストアンサー 回答者： gao57830 回答日時： 2015/12/16 21:38

slickのサイトを読みましたか？

rtlの下に、ノートが記述されています。

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

rtlを使う場合は親属性に"dir"を設定しろと記述されています。

なので、問題はScriptの部分ではなくHTMLの部分です。

例）
<ul class="sample" dir="rtl">　　　←ここに属性「dir="rtl"」が必要。
<li><img src="sample1.jpg"></li>
<li><img src="sample2.jpg"></li>
<li><img src="sample3.jpg"></li>
<li><img src="sample4.jpg"></li>
</ul>


これで、左→右に流れるはずです。

この回答へのお礼

無事に左から右に動きました！
すみません、slickのサイトは見ていたのですがsettingsの部分のみで、demosは見ていませんでした…。

わかりやすいご回答ありがとうございます、
とても助かりました！

お礼日時：2015/12/16 23:25