slickでスライドショーをお洒落に実装したかった。

スライドショーを実装するためにslickを導入

詰まりまくったことを解決したので投稿

環境

rails : 6.0.3.2
ruby : 2.6.6
Docker, docker-compose

参考URL

先にできていること

jQueryの導入

slick導入編

slick本体をインストール

qiita.rb

$ docker-compose run --rm web npm i slick-carousel

なんやかんや


40 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

applocation.html.erbのhead要素に追記

qiita.rb

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

jsファイル

slideの表示方法の設定については公式に書かれているので、一部だけ紹介。
slickの読み込みがどうもうまくいかなかったので、多分他の人とは違う書き方だと思う。

slideshow.js

const jQuery = require('jquery');
require('slick-carousel');
(function($) {
    $(function() {
        $('.theTarget').slick({
            dots: true,
            autoplay: true,
            fade: true,
            autoplaySpeed: 3000
        });
    })
})(jQuery);

viewにスライドショーで表示させたい画像の記述

show.html.erb

<div class = "theTarget">
    <%= image_tag 'abc.png' %>
    <%= image_tag 'def.png' %>
    <%= image_tag 'ghi.png' %>
    <%= image_tag 'jkl.png' %>
    <%= image_tag 'mno.png' %>
</div>

<%= javascript_pack_tag 'slideshow.js' %>  #jsファイルの読み込み

jsの読み込みのエラーが出た場合。

今回であれば、bin/webpackを実行してコンパイルすればエラーを解決できた。
webpackを理解できてないから、わざわざなんでこれをしないといけないのかが分からない

qiita.rb

 % docker-compose run --rm  web bin/webpack 

Version: webpack 4.43.0
Time: 15190ms
Built at: 07/24/2020 11:18:43 PM