jqueryのプラグインslickの画像スライダーで困っています。

jqueryのプラグインslickの画像スライダーで困っています。
ファーストビューをスライダーにして、スマホ・pcサイトそれぞれで2枚のファーストビュー画像を自動再生スライダーにしています。
https://crosspromotion.tokyo/rakuten/

ただ、pcサイトのみそのサイトを開いたときに自動再生してくれません。再読み込みしたりページ幅を変えたりすると動き出してくれたりする感じです。

記述としてはhtmlのほうで
<div class="first-view">
<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の方では、pc-slickとsp-slickを表示・非表示にしてレスポンシブ対応させています
.first-view {
margin-top: 85px;
}

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

.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;
}

どなたか分かる方いらっしゃいませんか？

No.1 回答者： fujillin 回答日時： 2021/07/20 23:52

こんばんは

＞どなたか分かる方いらっしゃいませんか？
肝心のJSに関して何も記載がないので、エスパーでもない限りわかりようがないですね。

ちなみに、質問文にご提示のマークアップとCSSをつないで、
（※ 「common.js」は内容不明なので削除）
$(()=>{
$('.slick01').slick({ autoplay: true });
});
を加えれば、PCで自動実行されます。

想像するところ、質問文にご提示のない部分が影響しているなどではないでしょうか？