公式サイトは▼▼こちら▼▼
https://kenwheeler.github.io/slick/
想定する読者
- html/cssはわかる
- jsはわからない
- slickは簡単だって聞いたのに！
- 英語はちょっと
- 初心者向けの記事読んでも解決しなかった
- 私はやっぱりダメなんだ…
では見ていきましょう！
まず丸コピなら動くのかチェック
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>
<body>
<ul class="slider01">
<li><img alt="画像1" src="ここはお手持ちの画像に1.jpg" /></li>
<li><img alt="画像2" src="ここはお手持ちの画像に2.jpg" /></li>
<li><img alt="画像3" src="ここはお手持ちの画像に3.jpg" /></li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
$(document).ready(function(){
$('.slider01').slick();
});
</body>
</html>
この丸コピなら動いている感じがする場合、
あなたの環境は問題ありません。
あなたのコードに問題があります。
丸コピでも動かない場合、
コード以外の問題が考えられます。
その場合は一度寝ることをお勧めします。
動かない時のチェックリスト
jQueryを読み込んでいるか
CDNを読み込んでいるか
上記、自分のソースからリンク踏んで読み込んでいるか確認
クラスとIDを間違えていないか（.と#がごっちゃになっていないか）
クラスかIDをタイプミスしていないか
不要な全角スペースが入っていないか
自分はいま疲れていないか、一度寝てそれから考えてみないか？
最悪画像がリンク切れしてても、スライダーは動くはず。
疲れているが時間のない方は、頼れる隣人にソースを少し見てもらうのも手です。
家族でも恋人でも友達でもいいです。単純なタイプミスなら気づいてもらえるかも。
もし知識のある知り合いがいるなら真っ先に聞くべきです。
それでも動かない
うごくはずだ！あきらめるな！
根性論はさておき、あなたはかなり追い詰められている可能性が高いです。
一度席を立ってブレイクタイムを取るなどして、気分をリラックスさせましょう。
本当に単純なミスが原因のはずですので、
根気強く記述を変えたりコピペしなおしたりして動くまでトライしましょう。
動くまでやれば絶対に動きます。