jQueryのslickがhtmlに読み込まれない件について

jQuery初心者です。slickが反応せず、画像が縦並びのままなので解決策を教えていただきたいです。
vsコードを使用。
ファイル構造は以下の通りです

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

こちらのサイトや
この動画を参考にやりました。

jQuery　は

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
コード

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

これを入れてもダメでした。

以下HTML・・・・

<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>portfolio</title>

	<link rel="stylesheet" href="css/style.css">

	<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
	<link href="css/slick.css" rel="stylesheet" type="text/css">

	<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
	<script type="text/javascript" src="js/slick.min.js"></script>
	<script type="text/javascript" src="js/style.js"></script>
</head>

<body>
	<header>
		header
	</header>

	<div class="main-visual">
		main-visual
	</div>

	<nav>
		nav
		<!-- <ul>
			<li><a href=”#”>HOME</a></li>
			<li><a href=”#”>WORK</a></li>
			<li><a href=”#”>ABOUT</a></li>
			<li><a href=”#”>CONTACT</a></li>
		</ul> -->
	</nav>

	<main>
		WORK
		<!-- new-work -->

		<ul class="slider">
			<li><img src="img/wv1.png" alt=""></li>
			<li><img src="img/wv2.png" alt=""></li>
			<li><img src="img/wv3.png" alt=""></li>

		</ul>


	</main>

	<footer>footer</footer>


</body>

</html>

以下JS・・・・

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    dots: true,
});

以下scss・・・・


* {
  margin: 0;
			padding: 0;
			border: 0;
			list-style: none;
}

// w1280

body{
	display: flex;
    flex-direction: column;
    text-align: center;
}


header{
    height: 120px; 
}

.main-visual{
    height: 413px;
}

nav{
    height: 80px;
    ul{
        li{
            list-style: none;
            display: inline-block;
            width: 18%;
            min-width: 20px;
        }
    }

}
main{
    margin-top: 36px;
   height: 545px; 
   margin-bottom: 36px;

   .slider{
        margin: 100px auto;
    width: 80%;
    img{
        height: auto;
    width: 100%;
    }
   }
   .slick-prev:before,
.slick-next:before {
    color: #000;
}
}

footer{
    height: 144px;
}

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

回答1件

ベストアンサー

js
1$(function(){
2    $('.slider').slick({
3        autoplay: true,
4        autoplaySpeed: 5000,
5        dots: true,
6    });
7}); // これでどうでしょう。

投稿2020/05/07 14:49

kei344

総合スコア69400

sgc_o_

2020/05/07 14:56

できました！ありがとうございます、、付け足さないといけない理由とかってご存知でしたら教えていただきたいです、、、

kei344

2020/05/07 15:02

script要素は読み込まれた時点でパースされている要素しか読めません。（.sliderとかまだ無い）なので、DOMのロードを待って処理する$(function(){});とか使います。【jQueryの基本 - $(document).ready - Qiita】 https://qiita.com/8845musign/items/88a8c693c84ba63cea1d 【DOMContentLoaded周りの処理を詳しく調べてみました - Qiita】 https://qiita.com/mamosan/items/ff336b5cc0a1a95e03a7

sgc_o_

2020/05/07 15:13

ありがとうございます！

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