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

Question

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;
}

Answer 1

jQueryは1つしか読み込めないのに二重に取り込もうとしているので、
とりあえず<!--タイルアニメーション-->の下にある

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

を削除してください。

Comments

[ayuayuayu]

二重がダメなのですね、、
ですがそれを消すとタイルアニメーションが動かなくて、、、
こういった場合どうしたらいいのでしょうか、、、

[RiaFeed]

jQuery3.0に$(window).loadはないらしいので$(document).readyに変えてみよう

https://zenn.dev/junki555/articles/c25c1cb729d334990a6c

[ayuayuayu]

$(document).ready　にすればいいのですすね！！
すぐできました！！！
有難う御座います。
jQueryのバージョンによって使える、使えないが全然わからなくて、、
参考になりました。

[ayuayuayu]

質問なのですが、スクロールして再度ページを読み込んだ場合　タイルが一番上に出てしまうので
その場で出るようにposition: fixed;のように固定したいのですが、できません、、
cssではなくてjqueryの方を変えないといけないですか？？

Answer 2

https://kenwheeler.github.io/slick/
をよく見ると、jQueryのバージョンが1.11.0だったりします。
質問者さんのソースは3系なので、互換性がないのかもしれません。
（3系は設計が大きく変わっていたはず。）

他の方の回答を見て思ったのですが、
私は3系の方を消すのが正しいと思う。
3系の読み込み箇所に、1.7.1の読み込み記述を移動させる感じで。
もしも3系に依存した記述をしている箇所があるとエラーになるかもしれないけれど、
直してみてからどうなるか見極めないとね。

Comments

[ayuayuayu]

ありがとうございます。
試してみたところエラーが出てしまいました、、

解決はしましたが、回答してくださってありがとうございました。
jQueryのバージョンの違いを勉強します。