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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

jQuery

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

解決済

2回答

18451閲覧

Slick実装でUncaught TypeError: $(...).slick is not a function

hrc

総合スコア55

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

jQuery

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

2クリップ

投稿2016/07/31 07:42

カルーセルをつけようと思ってSlickをつけてみましたが全く動きません。
http://kenwheeler.github.io/slick/

エラーは
$('.carousel').slick({
の箇所で
Uncaught TypeError: $(...).slick is not a function
と吐き出されています。
(Chromeのコンソールで確認)

ruby

1 script src="//code.jquery.com/jquery-1.11.0.min.js" 2 script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" 3 = javascript_include_tag 'slick.min.js' 4 5 javascript: 6 $(document).ready(function(){ 7 $('.carousel').slick({ 8 slidesToShow: 5, 9 slidesToScroll: 1, 10 autoplay: true, 11 autoplaySpeed: 2000, 12 }); 13 }); 14

ViewのDiv該当箇所はこうなってます。ちなみにSlimです。

ruby

1.slider.carousel 2 div 3 img alt="" src=imgurl(@restaurant.image1) / 4 div 5 img alt="" src=imgurl(@restaurant.image2) / 6 div 7 img alt="" src=imgurl(@restaurant.image3) / 8 div 9 img alt="" src=imgurl(@restaurant.image4) / 10

AssetPiplineには特に設定していませんが、JQueryを該当箇所とこちらで2度呼んでいるのが問題なのでしょうか?
JS部分のJQueryのリンク外しても同じエラーにはなります。

ruby

1//= require jquery 2//= require jquery_ujs 3//= require underscore 4//= require bootstrap 5//= require gmaps/google 6

どなたかお分かりになる方おりませんでしょうか?

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

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

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

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

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

guest

回答2

0

自己解決

こちらの件ですが、render partialで読み込んでいたViewに記述していたのが問題のようで、本体の方に転記したら正しく表示されるようになりました。お騒がせしてすみません。

投稿2016/08/06 09:27

hrc

総合スコア55

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

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

0

一般的にjQueryを多重読み込みした場合、エラーとなる可能性があります。
なので、まずjQueryを1回だけ読み込むような形に書きなおしてみてください。

多重読み込みを解消してもダメなら、jQueryコード内の$を全てjQueryに直してみてください。
$が他のスクリプトとコンフリクト起こしている可能性があるので。

javascript

1 jQuery(document).ready(function(){ 2 jQuery('.carousel').slick({ 3 slidesToShow: 5, 4 slidesToScroll: 1, 5 autoplay: true, 6 autoplaySpeed: 2000, 7 }); 8 });

こんな感じで。

投稿2016/07/31 19:43

aKusano

総合スコア3763

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

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

hrc

2016/08/01 14:20

遅くなってすみません。これから確認します。ありがとうございます!
hrc

2016/08/03 13:14

こちらの件、大変お待たせしました。上記に書き換えてみましたが Uncaught TypeError: jQuery(...).slick is not a function となってしまいます。重複は解消しております。何度もすみません。
aKusano

2016/08/04 06:06

そうですか。。。 そうなるとちょっと私の知識では分かりかねますね。。。。 ちなみにslick.js以外のjQueryプラグインとか実行コードとかは動作しますか? どうもjQuery自体がちゃんと読めていないような雰囲気がしますので、 一度その辺りを確認してみてはいかがでしょうか? お役に立てなくて申し訳ありません。
hrc

2016/08/04 06:36

ありがとうございます!同じページにGoogleMapsを貼り付けていますが、こちらは正しく動作しておりまして、これはJQuery使っているのでこのことから動作はしてそうと考えております。
aKusano

2016/08/04 06:43

そうですか。だとするとますます分かりませんね。。 解決すると良いのですが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問