slickが動かない時に確認すること
この記事を書こうと思った理由
先週、コーディングの仕事で、slickが動かなくて困っていました。
以前自分で作成したWebサイトでは、動かすことが出来ていたので、そのコードを元にして書いていきます。
確認すること
大きく分けて3つあります。
- 必要なファイルが読み込めているか
- HTMLの記述方法が合っているか
- Javascript(jQuery)の記述方法が合っているか
一つづつ見ていきます。
必要なファイルが読み込めているか
- slick.css
- slick-theme.css
- スライダーを動かすためのjQueryのファイル
- slick.min.js
それぞれのファイルを読み込むための記述の箇所は、
「slick.css」と「slick-theme.css」と「スライダーを動かすためのjQueryのファイル」
→HTMLのheadタグ内
<head>
</script>
<!-- jQuery自体を読み込むために必要な記述 -->
<script src="query.js"></script>
<!-- 「スライダーを動かすためのjQueryのファイル」を読み込む記述 -->
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<!-- 「slick.css」を読み込む記述 -->
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
<!-- 「slick-theme」を読み込む記述 -->
</head>
slick.min.js
→bodyの閉じタグの直前
<script type="text/javascript" src="slick/slick.min.js"></script>
<!-- 「slick.min.js」を読み込む記述 -->
</body>
HTMLの記述方法が合っているか
スライドさせたい画像のimgタグをdivタグで囲ったものを、その枚数分記述してさらにdivタグで囲います。
一番大枠のdivタグのクラス名をjQueryのオブジェクトとして利用します。
<div class="main-top-slicks">
<!-- main-top-slicksをjQueryで使用する -->
<div class="main-top-slick"><img src="img/architecture-3081441_1920.jpg"></div>
<div class="main-top-slick"><img src="img/nagoya-1697564_1920.jpg"></div>
<div class="main-top-slick"><img src="img/ferris-wheel-826582_1920.jpg"></div>
<div class="main-top-slick"><img src="img/japan-616246_640.jpg"></div>
<div class="main-top-slick"><img src="img/japanese-cherry-trees-2168858_1920.jpg"></div>
<div class="main-top-slick"><img src="img/nagoya-castle-2977919_1920.jpg"></div>
</div>
<!-- 6枚の画像をスライドさせるコード -->
Javascript(jQuery)の記述方法が合っているか
HTMLで記述した一番大枠のdivタグのクラス名をオブジェクトにして、slickメソッドを使用します。
その外側に$(document).ready(function(){});を書くと上手く動きました。
$(function(){
$(document).ready(function(){
$('.main-top-slicks').slick({
// 「main-top-slicks」はHTMLで定義したクラス名
slidesToShow: 4,
autoplay: true,
autoplaySpeed: 3000,
speed: 1600
// スライドの細かい設定
});
});
});
以上のポイントを確認すれば、動かなかったslickが動くようになるかもしれません。
