slickについて教えてください

slickを導入したく、いろいろなサイトを見ながら試してみておりますが、画像が縦並びになったまま実行されません。

html
1<head>
2<link rel="stylesheet" type="text/css" href="./css/slick.css"/>
3<link rel="stylesheet" type="text/css" href="./css/slick-theme.css"/>
4<link rel="stylesheet" type="text/css" href="./css/style.css">
5</head>
6
7<body>
8  <div class="pickup-contents">
9	<div class="p-contents">
10	   <a href="#"><img src="">
11	   <p class="p-contents-text">AAA</p>
12	   </a>
13	</div>
14	<div class="p-contents">
15	   <a href="#"><img src="">
16	   <p class="p-contents-text">BBB</p>
17	   </a>
18	</div>
19	<div class="p-contents">
20	   <a href="#"><img src="">
21	   <p class="p-contents-text">CCC</p>
22	   </a>
23	</div>
24	<div class="p-contents">
25	   <a href="#"><img src="">
26	   <p class="p-contents-text">DDD</p>
27	   </a>
28	</div>
29  </div>	
30
31<script type="text/javascript" src="./js/jQuery-3.3.1.min.js"></script>
32<script type="text/javascript" src="./js/slick.min.js"></script>
33<script type="text/javascript" src="./js/main.js"></script>
34</body>

js
1$(document).on('ready', function() {
2    $('.pickup-contents').slick({
3        dots: true, 
4        infinite: true, 
5        slidesToShow: 3,
6        slidesToScroll: 1
7    });
8  });

お分かりになる方がいらっしゃいましたらお願いいたします。

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

回答1件

ベストアンサー

JavaScript の on の部分を書き換えれば動くと思います。

javascript
1$(document).ready(function() {

ready は jQuery3.0 から削除されています。

There is also $(document).on( "ready", handler ), deprecated as of jQuery 1.8 and removed in jQuery 3.0. Note that if the DOM becomes ready before this event is attached, the handler will not be executed.

https://api.jquery.com/ready/

投稿2020/08/05 00:54