swiperとslickについて

Question

swiperとかslickなどでスライドショーを作っています。

大体以下のような感じのコードです。(slick）

単体ではちゃんと動くのですが、既に作っているホームページに組み込むと動かなくなってしまいます。

記述に間違いはないはずなのですが、最初はプラグインの相性なのかなと考えていました。
しかし普通に他のと一緒に動いてるホームページも見かけるので、自分のコードのどこかが悪いと考えてしまうのです。

こういう場合どうしたらいいでしょうか？

html

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

<ul class="slider">
    <li><a href="#"><img src="images/gallery5.jpg" alt="image01"></a></li>
    <li><a href="#"><img src="images/gallery6.jpg" alt="image02"></a></li>
    <li><a href="#"><img src="images/gallery7.jpg" alt="image03"></a></li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/script.js"></script>
<script src="js/slick.min.js"></script>

css

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

javascript

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

Answer 1

script要素でひとつづつスクリプトをロードする場合、ファイルごとの依存関係を把握がすることが必要です。

今回の場合は、jQuery ← slick ← script.js のように依存関係がありますので、Slickを読み込んだ後に、sunred7083さんが書いたscript.jsを読み込んでみてください。

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/script.js"></script>

Comments

[sunred7083]

解決したのでベストアンサーにさせていただきました。ありがとうございます。

[NozomuIkuta]

解決したようで良かったです