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

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

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

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

解決済

slick.jsとほかのjqueryを使うと slick.jsにエラー(関数がないと)出でしまう

ayuayuayu
ayuayuayu

総合スコア59

jQuery

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

2回答

0リアクション

0クリップ

344閲覧

投稿2022/07/28 03:34

編集2022/07/28 03:42

slick.jsでスライダーを作ったのですがスライダー自体は問題なくできました。
ですが1個前の質問で完成したタイルのアニメーションを入れるとslick.jsにエラーが出てしまい動きません、、
2つとも個別にやると問題ないのですがこれは何がダメでエラーになってしまうのでしょうか、、、?
読み込み順を変えてみてもダメでした、、

エラー文 
jquery.min.js:2 jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function
at HTMLDocument.<anonymous>

https://kenwheeler.github.io/slick/

<!-- スリック スライダー読み込み --> <link rel="stylesheet" type="text/css" href="slick.css"> <link rel="stylesheet" type="text/css" href="slick-theme.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> <script type="text/javascript" src="slick.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="main.css"> <script> $("document").ready(function(){ $('.mypattern').slick({ autoplay: true, autoplaySpeed: 2500, speed: 800, dots: true, arrows: false, centerMode: true, centerPadding: '30%' }); }); </script> <div class="slider mypattern"> <div><img src="img/5.jpg" /></div> <div><img src="img/5.jpg" /></div> <div><img src="img/5.jpg" /></div> <div><img src="img/5.jpg" /></div> <div><img src="img/5.jpg" /></div> </div> <!--タイルアニメーション--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="loader" class="loader"> <div class="layer"></div> <div class="grid" style="position:absolute;top:0px;left:0px;z-index:100;"></div> </div> <script> $(function(){ var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; var tile_w = 100; var tile_h = 100; var tile_x = (w / tile_w); var tile_y = (h / tile_h); for(var x = 0; x < tile_x; x++) { for(var y = 0; y < tile_y; y++) { $('.grid').append('<div style="position:absolute;z-index:100;" class="item' + x + '_' + y + ' item2"></div>') $('.item' + x + '_' + y).offset({top: y * tile_h, left: x * tile_w}); $('.item' + x + '_' + y).height(tile_h); $('.item' + x + '_' + y).width(tile_w); } } }); </script> <script> $(window).load(function(){ var setElm = $('.item2'), delaySpeed = 10, fadeSpeed = 10; randomShow(); function randomShow(){ var elmLength = setElm.length, randomSet = Math.floor(Math.random()*elmLength); $(setElm[randomSet]).css({display:'none',opacity:'1'}).animate({opacity:'0'},fadeSpeed); setElm.splice(randomSet,1); if (elmLength > 0) { setTimeout(function(){randomShow();},delaySpeed); } else { return false; //全てロード終了後に処理を加える際はココに } } }); </script> .grid { display: flex; flex-wrap: wrap; position: absolute; top: 0; left: 0; width: 100%; } .item2{ width: 100px; height: 100px; will-change: opacity, background; transition: background 0.7s cubic-bezier(0.215, 0.61, 0.355, 1); position: absolute; z-index: 100; background:#3AFF00; border: 1px solid #888888; }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQuery

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