Slick.jsで左右逆方向にスクロールするカルーセルスライダーの設定方法

図のイメージのようなことが実現したいです。

同一ページ内で、スライダー１とスライダー２がそれぞれ逆方向にautoplayでスクロールするカルーセルスライダーを作成したいです。

【試してみたこと】
slick.jsを使って、以下のように設定してみました。

js
1$('.slider-01').slick({
2  arrows: false,
3  dots: false,
4  infinite: true,
5  slidesToShow: 4,
6  adaptiveHeight: true,
7  autoplay: true,
8  speed: 500,
9  autoplaySpeed: 3000,
10  accessibility: false
11});
12
13$('.silder-02').slick({
14  arrows: false,
15  dots: false,
16  infinite: true,
17  slidesToShow: 4,
18  adaptiveHeight: true,
19  autoplay: true,
20  speed: 500,
21  autoplaySpeed: 3000,
22  accessibility: false,
23  rtl: true
24});

スライダー１は希望通りにできたのですが、
スライダー２は rtl: true の設定を加えると、画面右に隠れて表示されない状態になってしまいました。

rtlの設定が間違っているのでしょうか？

あるいは他のやり方で左から右にスクロールさせるスライダーの設定方法がありましたら、ご教示いただけませんでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

http://kenwheeler.github.io/slick/

のright to leftのサンプルで
Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

と書いてます通り、 dir="rtl"の設定が必要です。

HTML
1
2<html>
3  <head>
4  <title>My Now Amazing Webpage</title>
5  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css" />
6  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.min.css"/>
7
8  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
10  
11  </head>
12  <body>
13
14  <div class="your-class" dir="rtl">
15    <div><img src="./apple.png" /></div>
16    <div><img src="./banana.png" /></div>
17    <div><img src="./apple.png" /></div>
18    <div><img src="./banana.png" /></div>
19    <div><img src="./apple.png" /></div>
20    <div><img src="./banana.png" /></div>
21    <div><img src="./apple.png" /></div>
22    <div><img src="./banana.png" /></div>
23    <div><img src="./apple.png" /></div>
24    <div><img src="./banana.png" /></div>
25    <div><img src="./apple.png" /></div>
26    <div><img src="./banana.png" /></div>
27    <div><img src="./apple.png" /></div>
28  </div>
29
30  <script type="text/javascript">
31    $(document).ready(function(){
32      $('.your-class').slick({
33        arrows: false,
34        dots: false,
35        infinite: true,
36        slidesToShow: 4,
37        slidesToScroll: 1,
38        adaptiveHeight: true,
39        autoplay: true,
40        speed: 500,
41        autoplaySpeed: 500,
42        accessibility: false,
43        rtl: true
44      });
45    });
46  </script>
47
48  </body>
49</html>
50
51