【jQuery】スライダープラグイン「slick」反映されないのはなぜ？

前提・実現したいこと

【jQuery】スライダープラグイン「slick」を使うため、https://webdesignday.jp/inspiration/technique/jquery-js/3847/
コチラのサイトを参考にしてやってみたのですが反映されません。
なぜでしょうか。

HTM

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/riset.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-min.js"></script>
<script src="js/index.js"></script>
<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/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>
<link  rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/ slick/slick.css"/>
</head>
<body>
<main id="main">
 <article id="main_top1">
   <ul class="slider">
    <li class="img"><a href="#"><img src="image/oc_dou.jpg" alt="image01"></a></li>
    <li class="img"><a href="#"><img src="image/yoga_sei.jpg.jpg" alt="image02"></a></li>
    <li class="img"><a href="#"><img src="work3_1.jpg.jpg" alt="image03"></a></li>
   </ul>
  </article>
  <article id="main_top2">
  </article>
 </main>
</body>

CSS

@charset "UTF-8";
/* CSS Document */
body{
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
/*    background-image: url(../image/top.jpg);*/
/*	width: 1400px;*/
	font-size: 10px;
	color: #000000;
	min-width: 1000px;
}
#main{
	width: 1044px;
	margin-left: auto;
	margin-right: auto;
}
.main_top1{
	padding-bottom:38px;
}
.slider{
    margin: 100px auto;
    width: 80%;
}
.slider img{
    height: auto;
    width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

JavaScript

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

退会済みユーザー

2018/10/27 13:08

slick.js関連は過去に似たような質問があり解決済みになっているので参考にしてみてください。

m.ts10806

2018/10/27 14:19

このタイトルでは何が問題なのか・要件なのかわかりません。タグにある内容も基本的はタグで対応できるので必要ありません。タイトル調整してください（ヒントとしてはslickの質問を今後することになったときに同じタイトルになったら意味が分かりますか？という点です）

asuyan01

2018/10/28 04:44

探す手間をはぶこうてしていました。それではダメですね。過去の質問を参考にしてみます。

asuyan01

2018/10/28 04:46

確かにこのタイトルだと質問になっていませんね。ご指摘ありがとうございます。改善します。

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

回答1件

ベストアンサー

DOMが読み込まれてからslick関数を読み込んでください。

今流な書き方をするのであれば、scriptタグはdomの後ろかつbodyの閉じタグ前に移動させてください。

slick関数はdom、画像などが読み込まれた後に実行されるように下記のように変更します。

lang=javascript
1window.addEventListener('load', function () {
2    $('.slider').slick({
3        autoplay:true,
4        autoplaySpeed:5000,
5        dots:true,
6    });
7});

投稿2018/10/27 13:05

退会済みユーザー

総合スコア0