質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

6回答

11147閲覧

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

hayatoganbaru

総合スコア7

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/07/24 07:32

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

プログラミング初心者です。
オリジナルアプリのイベント一覧表示機能の実装で
イベントをスライドショーで閲覧できるよう実装中です。
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')

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

投稿2021/07/24 07:35

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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' %> <!-- slickの並列CSS --> <%= yield :slick_parallel %> <!-- CSS --> </head> <body> <%= yield %> <!-- slickの並列javascript --> <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の読み込み確認する場所などに誤りがあるのでしょうか?
m.ts10806

2021/07/24 09:01

では、読み込み順ですね。 slick本体読み込みが先にくるように。 jQuery本体 slick本体 slick呼び出し記述 となるように。
hayatoganbaru

2021/07/25 05:54

返信が遅くなり申し訳ありません。 順番を変えると表示されるようになりました! ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問