Uncaught TypeError: $(...).slick is not a function

オリジナルアプリを作成中にエラー発生

プログラミング初心者です。
オリジナルアプリのイベント一覧表示機能の実装で
イベントをスライドショーで閲覧できるよう実装中です。
jqueryとslickを導入して実装に臨みましたが、
コンソールで以下のようなエラーが発生しております。

console
1slick_index.js:1 Uncaught TypeError: $(...).slick is not a function
2    at Object.<anonymous> (slick_index.js:1)
3    at Object../app/javascript/slick_index.js (slick_index.js:1)
4    at __webpack_require__ (bootstrap:19)
5    at Object../app/javascript/packs/application.js (application.js:10)
6    at __webpack_require__ (bootstrap:19)
7    at bootstrap:83
8    at bootstrap:83
9(anonymous) @ slick_index.js:1
10./app/javascript/slick_index.js @ slick_index.js:1
11__webpack_require__ @ bootstrap:19
12./app/javascript/packs/application.js @ application.js:10
13__webpack_require__ @ bootstrap:19
14(anonymous) @ bootstrap:83
15(anonymous) @ bootstrap:83
16slick_index.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

解決したいこと

エラーの解決の為のアドバイスをどなたかお教えいただけないでしょうか。
Uncaught TypeError: $(...).slick is not a functionを直訳すると
キャッチされなかった型エラー：オブジェクト.slickは関数ではありません
でした。
なので、メソッド名や関数名のスペルミスを疑いましたが、問題はないように
思います。
どなたかご回答いただけないでしょうか？

該当のソースコード

slick_index.js

js
1
2$('.event-lists').slick({
3  autoplay: true,
4  infinite: true,
5  slidesToShow: 3,
6  slidesToScroll: 3,
7  prevArrow: '<div class="slick-prev"></div>',
8  nextArrow: '<div class="slick-next"></div>',
9  dots: true,
10  responsive: [
11    {
12      breakpoint: 769,
13      settings: {
14        slidesToShow: 2,
15        slidesToScroll: 2,
16      }
17    },
18  {
19    breakpoint: 426,
20    settings: {
21      slidesToShow: 1,
22      slidesToScroll: 1,
23      }
24  }
25  ]
26});

application.js

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('../slick_index')

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

回答6件

No wonder why I dont know about this site called https://www.airslate.com/product/drag-drop-flow-creator previously. Then you might save a lot of time looking at other platforms. There are no drawbacks!

投稿2023/08/01 17:31

sotera8477

総合スコア26

The about us page at alto has been the same ever since and I think they need updating. The page at https://www.signnow.com/ask/what-do-you-need-to-read-and-sign-a-pdf-file is an old one with their old design. They should consider a revamp of everything.

投稿2023/07/31 10:31

sotera8477

総合スコア26

I have bookmarked your website because this site contains valuable information in it. I am really happy with articles quality and presentation. Thanks a lot for keeping great stuff. I am very much thankful for this site. midtown modern

投稿2023/07/27 16:03

sotera8477

総合スコア26

Truly, this article is really one of the very best in the history of articles. I am a antique ’Article’ collector and I sometimes read some new articles if I find them interesting. And I found this one pretty fascinating and it should go into my collection. Very good work! liv at mb

投稿2023/07/27 14:56

sotera8477

総合スコア26

Hey There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I’ll definitely return. Klimt Cairnhill

投稿2023/07/27 13:28

sotera8477

総合スコア26

ベストアンサー

application.js 　見る限り、slick.js本体が読み込まれていないように見受けられます。
エラーもそういう時に出るものです。

投稿2021/07/24 07:35

m.ts10806

総合スコア80875

hayatoganbaru

2021/07/24 08:09

ご回答ありがとうございます。ご指摘の件ですが、 application.html.erbでは slick.jsを読み込めているように思えました。 <!DOCTYPE html> <html> <head> <title>Cipher</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <script type="text/javascript" src="https://js.pay.jp/v1/"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>  <%= yield :slick_parallel %>  </head> <body> <%= yield %>  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <%= yield :parallel_slick %> </body> </html> slick.jsの読み込み確認する場所などに誤りがあるのでしょうか？