J'ai résolu le problème, alors je l'ai publié.
rails : 6.0.3.2 ruby : 2.6.6 Docker, docker-compose
http://kenwheeler.github.io/slick/
Introduction de jQuery
qiita.rb
$ docker-compose run --rm web npm i slick-carousel
En quelque sorte
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>
Puisque le réglage de la méthode d'affichage des diapositives est officiellement écrit, seule une partie est introduite. Je pense que c'est écrit différemment des autres parce qu'il n'a pas été chargé.
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' %> #Lire le fichier js
Dans ce cas, j'ai pu résoudre l'erreur en exécutant bin / webpack et en compilant. Je ne comprends pas le webpack, donc je ne sais pas pourquoi je dois faire ça
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