投稿した複数の画像をスライドショー形式で表示したい。

前提・実現したいこと

railsを使ってオリジナルアプリを作成しているものです。
オリジナルアプリ内に複数画像を投稿できる機能を実装し、投稿した画像をslickとjqueryを用いてスライドショー形式にしようとしたところ、うまく画像が表示されませんでした。
解決方法をご教授いただけると幸いです。

該当のソースコード

ruby
1  <ul class ="gallery">
2   <%@cat.images.each do |image|%>
3     <li><%=image_tag image,class:"image-cat"%></li>
4   <% end %>
5  </ul>
6    <ul class="choice-btn">
7     <%@cat.images.each do |image|%>
8     <li><%=image_tag image,class:"image-cat"%></li>
9   <% end %>
10   </ul>
11

js
1//上部画像の設定
2$('.gallery').slick({
3  infinite: true, //スライドをループさせるかどうか。初期値はtrue。
4  fade: true, //フェードの有効化
5  arrows: true,//左右の矢印あり
6  prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
7  nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
8});
9
10//選択画像の設定
11$('.choice-btn').slick({
12  infinite: true, //スライドをループさせるかどうか。初期値はtrue。
13  slidesToShow: 8, //表示させるスライドの数
14  focusOnSelect: true, //フォーカスの有効化
15  asNavFor: '.gallery', //連動させるスライドショーのクラス名
16});
17  
18//下の選択画像をスライドさせずに連動して変更させる設定。
19$('.gallery').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
20  var index = nextSlide; //次のスライド番号
21  //サムネイルのslick-currentを削除し次のスライド要素にslick-currentを追加
22  $(".choice-btn .slick-slide").removeClass("slick-current").eq(index).addClass("slick-current");
23});

css
1.gallery{
2  margin:0 0 5px 0;
3}
4
5/*矢印の設定*/
6
7/*戻る、次へ矢印の位置*/
8.slick-prev, 
9.slick-next {
10    position: absolute;/*絶対配置にする*/
11  z-index: 3;
12    top: 42%;
13    cursor: pointer;/*マウスカーソルを指マークに*/
14    outline: none;/*クリックをしたら出てくる枠線を消す*/
15    border-top: 2px solid #ccc;/*矢印の色*/
16    border-right: 2px solid #ccc;/*矢印の色*/
17    height: 25px;
18    width: 25px;
19}
20
21.slick-prev {/*戻る矢印の位置と形状*/
22    left:2.5%;
23    transform: rotate(-135deg);
24}
25
26.slick-next {/*次へ矢印の位置と形状*/
27    right:2.5%;
28    transform: rotate(45deg);
29}
30
31/*選択するサムネイル画像の設定*/
32
33.choice-btn li{
34  cursor: pointer;
35  outline: none;
36  background:#333;
37  width:25%!important;
38}
39
40.choice-btn li .image-cat{
41  opacity: 0.4;/*選択されていないものは透過40%*/
42}
43
44.choice-btn li.slick-current .image-cat{
45  opacity: 1;/*選択されているものは透過しない*/
46}
47
48ul{
49  margin:0;
50  padding: 0;
51  list-style: none;
52}
53

controller
1  def show
2    @cat = Cat.find(params[:id])
3  end

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Index</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7     <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
8     <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css">
9     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
10     <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-4/css/6-2-4.css">
11
12    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
13    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
14  </head>
15
16  <body>
17    <%= yield %>
18    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
19    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>  
20    <script src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-4/js/6-2-4.js"></script>
21  </body>
22</html>

補足情報（FW/ツールのバージョンなど）

slickとjqueryはプラグイン方式をとっています。
現在の表示状況はスライドショーの矢印だけ表示されている状況です。

skys215

2021/11/21 03:33

イメージのパスをあってますか？

pengin-fes2

2021/11/22 11:27

返信ありがとうございます。スライドショーを用いない場合だと画像は表示されるのであっていると思います。

skys215

2021/11/22 13:10

ブラウザーでF12を押して、imageのパズを確認してみてください。コンソールにエラーもあるかもしれません、あれば載せてください。

pengin-fes2

2021/11/23 11:49

すいません、返信が遅くなりました。先ほど確認したところ画像は表示されているのですが、スライドの矢印が表示されていない状況に変わっていました。コンソールには以下のようなエラーが出てしまいます。ご教授お願いします。 Uncaught ReferenceError: $ is not defined at Object../app/javascript/show.js (show.js:1) at __webpack_require__ (bootstrap:19) at Object../app/javascript/packs/application.js (application.js:10) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83

skys215

2021/11/23 13:10

jqueryがロードできてないようです。 jqueryはインポートしましたか？

pengin-fes2

2021/11/23 13:38

返信ありがとうございます。一応、上記のHTMLのbodyの部分にインポートしているのですが、うまく導入できていないですかね？

pengin-fes2

2021/11/23 13:50

追記です。上記のHTMLのbodyの部分にインポートしているコードをhead部分にうつしたところ、エラーは消えましたがスライドショーの矢印は表示されていないまま状態になりました。

skys215

2021/11/24 01:07

`$('.gallery').slick({......});`はどこに書いたのですか？あとスクリーンショットもお願いします。できればDevelopers Tools画面付きで。

pengin-fes2

2021/11/24 08:15

返信ありがとうございます。このような感じになっています。 /Users/yoshimotokouji/Desktop/スクリーンショット 2021-11-24 17.07.17.png /Users/yoshimotokouji/Desktop/スクリーンショット 2021-11-24 17.13.05.png

pengin-fes2

2021/11/24 08:19

スクショが上手く載せれなかったのでgyazoで載せます。申し訳ないです。 `$('.gallery').slick({......});`はshow.jsにあります。 vsコード https://gyazo.com/2a398be04047119c4cb011395a662a55 ブラウザ画面 https://gyazo.com/6f233fd44ec5fed68ee994b3b1bcdd0f

skys215

2021/11/24 09:16

show.jsはjquery`<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>`の下にありますのか？

pengin-fes2

2021/11/24 10:47

show.jsはapp/javascript/show.jsにあって、 jqueryはapp/views/layouts/application.html.erb内のheadに記載しています。

skys215

2021/11/24 12:42

いや、show.jsもロードしないとは実行されないと思います。 show.jsはどこかでロードしてますか？

pengin-fes2

2021/11/24 20:30

application.jsでロードしています。