前提・実現したいこと
rails6を利用し、webアプリケーションを作成しています。
画像の一覧を見やすく表示するために、slickを使いスライダーを作ろうとしているのですが、うまく動かせず困っています。
発生している問題・エラーメッセージ
localhostで読み込み、F12で確認すると、slick読み込んでいる場所show.html.erbで、以下のエラーメッセージが出ました。
console
1 Uncaught TypeError: $(...).slick is not a function 2 at HTMLDocument.<anonymous> (1:128) 3 at e (jquery.min.js:2) 4 at t (jquery.min.js:2)
該当のソースコード
show.html.erb
html
1... 2<script> 3 jQuery(function(){ 4 console.log("hello"); 5 $('.slider').slick(); 6 }); 7</script>
helloの出力は確認できました。
slick関連のファイルやjqueryは views/layouts/application.html.erb のheadの部分で読み込んでいます。
html
1 <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> 2 <script type="text/javascript" href="/assets/slick/slick.min.js"></script> 3 <link type="text/styleseet" type="text/css" href="/assets/slick/slick.css"/> 4 <link type="text/styleseet" href="/assets/slick/slick-theme.css">
試したこと
slickの使い方でslickの使い方、導入を調べました
railsでjavascriptが読み込まれないときに確認すべきこととRails6でjQueryの導入方法をみてassets.rbに
Rails.application.config.assets.precompile += ['*.js','*.css']
application.jsに//= require_tree .
とrequire('jquery')
を書き足しました
補足情報(FW/ツールのバージョンなど)
Rails 6.0.2.2
ruby 2.5.1
webpackerのことやrails6のことをあまり理解せずに作り始めてしまったため、わからなくなってしまいました。
当たり前のことができていないかもしれませんが、ご教授いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/27 10:01
2020/05/27 10:31
2020/05/28 02:58