railsでslickを使っても画像が縦並びでスライドショーができません。

この記事（https://qiita.com/hitochan/items/e50733e5ab61a78a2edd）を見てスライドショーの実装をしていますが、slickが機能せず、画像が縦並びのままで、スライドショーになりません。どこに問題があるのか教えて頂きたいです。

（application.html.erb）

<head> <title>タイトル</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <link rel="stylesheet" href="style.css"> <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> <script type="text/javascript"> $(function() { $(".slick").slick({ dots: true, autoplay: true, }); }); </script>

<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

（index.html.erb）

行動規範の内容に同意します

回答1件

jQuery本体の読み込みより先にスクリプトを書いているから、のように見えます。

この行をslick起動しているscriptより先に書いたらどうでしょう。(jQueryがapplication.jsで読み込まれている前提)

html
1<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

あるいは以下をscriptより上に貼ってもいいですが、

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Railsのやり方に乗っ取ってやるなら後者より、application.jsで読み込むようにするのが良いと思います。
参考

※これでうまくいかない場合は別の原因がある事になるので、エラーが出ていないか等の情報が必要です。

投稿2021/12/30 14:51

umau

総合スコア805

22KAZUKI

2021/12/31 08:05

ご返答ありがとうございます！以下のような書き方でslickのscriptの上に書いてみましたが、変化しませんでした。もう少し試してみます。 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <script type="text/javascript"> $(function() { $(".slick").slick({ dots: true, autoplay: true, }); }); </script>

行動規範の内容に同意します