I've solved the problem, so I posted it.
rails : 6.0.3.2 ruby : 2.6.6 Docker, docker-compose
http://kenwheeler.github.io/slick/
Introduction of jQuery
qiita.rb
$ docker-compose run --rm web npm i slick-carousel
Somehow
40 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
qiita.rb
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
Since the setting of the slide display method is officially written, only a part is introduced. I think it's written differently from other people because it didn't load slick.
slideshow.js
const jQuery = require('jquery');
require('slick-carousel');
(function($) {
$(function() {
$('.theTarget').slick({
dots: true,
autoplay: true,
fade: true,
autoplaySpeed: 3000
});
})
})(jQuery);
ruby: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' %> #Read js file
In this case, I was able to resolve the error by running bin / webpack and compiling. I don't understand webpack, so I don't know why I have to do this
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
Recommended Posts