アトリエロワ

slick sliderで逆にすると画像が表示されなかったり途中で切れる場合

slick sliderで逆にすると画像が表示されなかったり途中で切れる場合はHTMLにdirを記載

HTMLに記載

HTML側に dir=”rtl” という記載が必要

<div class="slider" dir="rtl">
　<div></div>
　<div></div>
　<div></div>
　<div></div>
　<div></div>
</div>

jQueryに記載

逆に流す

 $('.slider').slick({
      rtl: true,
  });

下記は逆再生とは無関係（よく使う指示をメモしているだけです）

  $('.slider').slick({
    autoplay: true, // 自動でスクロール
    autoplaySpeed: 0, // 自動再生のスライド切り替えまでの時間を設定
    speed: 5000, // スライドが流れる速度を設定
    cssEase: "linear", // スライドの流れ方を等速に設定
    slidesToShow: 4, // 表示するスライドの数
    swipe: false, // 操作による切り替えはさせない
    arrows: false, // 矢印非表示
    pauseOnFocus: false, // スライダーをフォーカスした時にスライドを停止させるか
    pauseOnHover: false, // スライダーにマウスホバーした時にスライドを停止させるか
    rtl: true, // 逆に流す
    responsive: [
      {
        breakpoint: 750,
        settings: {
          slidesToShow: 3,
        },
      },
    ],
  });
});

HOME > javascript > slick sliderで逆にすると画像が表示されなかったり途中で切れる場合

javascript

javascript

+ More