Railsで画像をスライド表示させる"slick"を使うときの注意点

お！slickって便利そう→あれ、動かない。。

という方向けに書きます。slickの使い方に関しては、こちらの記事をご覧ください。とてもわかりやすいです。

上記の記事を読んでいる前提でお話ししますね。

私がslick導入に当たって悩んだのは、turbolinks（以下、ター坊）の記述を消さなければいけない。というところでした。この記述です。

application.js

//= require turbolinks

なぜかというと、ター坊を消してしまうと他の部分で不具合が発生してしまうから。

どうにかター坊を残したまま、実装したい。ということで、調べました。

すると、ター坊は読み込みを速くしてくれるけど、他のJSの人たちの読み込みを邪魔しちゃうときがあるみたい。

足は速いんだけど、バトンを渡すのが下手なようで。

ということで、邪魔された人たちもター坊の仲間に入れればいいのでは！と思い、

item.js

  $(document).on('turbolinks:load', ()=> {
    // 省略

    $(function() {
      $('.slider').slick({
        prevArrow:'<i class="fa fa-angle-left arrow arrow-left"></i>',
        nextArrow:'<i class="fa fa-angle-right arrow arrow-right"></i>',
        autoplay:true,
        autoplaySpeed:5000,
        dots:true,
        
      });
    });
  });

ター坊のもとにお世話になったところ、うまくいきました！

お役に立てれば幸いです😊

コロナに負けず、おうちで自分磨きを楽しみましょう！