slickの自動スライドが動かないときがあります。

Question

ファーストビューにpc/スマホでそれぞれ２枚ずつ画像を用意して画面幅で@mediaの記述で切り替わるようにしています。
ただ、ページ読み込み時にスライド機能が自動で始まらないときがありまして、再読み込みすると動いてくれたりします。

こちらのLPになります。
LPページ

htmlは下の記述で、

        <div class="pc-slick">
            <ul class="slick01">
                <li><img alt="画像1" src="images/pcfirst-view1.jpg" class="slider-img"/></li>
                <li><img alt="画像2" src="images/pcfirst-view2.jpg" class="slider-img"/></li>
            </ul>

        </div>

        <div class="sp-slick">
            <ul class="slick01">
                <li><img alt="画像1" src="images/スマホ　ファーストビュー　1.jpg" class="slider-img" /></li>
                <li><img alt="画像2" src="images/スマホ　ファーストビュー2.jpg" class="slider-img"/></li>
            </ul>

        </div>
          
          <script src="js/slick.min.js"></script>
          <script src="js/common.js"></script>
    </div>

cssはこちらになります

.first-view {
    margin-top: 85px;
}

.sp-slick {
    display: none !important;
}

.slider-img {
    width: 100%;
}

/* slixk */
.slick-prev, .slick-next {
    width: 100px;
    height: 100px;
}
.slick-prev:before, .slick-next:before {
    font-size: 100px;
}
/* 左のボタン */
.slick-prev {
    z-index: 2;
}


/* ファーストビュー（スマホ） */
@media (max-width: 767.98px) {
    .first-view {
        margin-top: 85px;
    }
    .slick-initialized .pc-slick {
        display: none;
    }
    .pc-slick {
        display: none;
    }
    .sp-slick {
        display: block !important;
    }
    .slick-prev, .slick-next {
        width: 30px;
        height: 30px;
    }
    .slick-prev:before, .slick-next:before {
        font-size: 30px;
    }

}

@mediaでpc-slickとsp-slickを表示・非表示にして切り替えています。

教えて頂ける方いましたらご回答よろしくお願いいたします。

追記になりますが
新規にこちらのページを読み込むと自動のスライダーがうまく動作せず
再読み込むすると動き出す傾向があります。

Answer 1

common.js の読み込みが早いのではないでしょうか？
https://codeaid.jp/js-load/
↑にもあるように

</body>タグの直前に入れてみてはどうでしょう？

Comments

[hurora]

回答いただきましてありがとうございます。
教えて頂いたことで、修正しましたら無事解決いたしました。