slickでPCの時のみ一枚目の画像を非表示にしたい

Question

前提・実現したいこと

slickで画像を表示する際に、PCのときのみ一枚目の画像を非表示にしたいです。（SPでは一枚目の画像も表示される）

display:noneで対象の画像とドットを非表示にしてみたのですが
一周したあと挙動が一瞬おかしくなります。。。（おそらくコードと画面の辻褄があってないことによるラグだとは思うのですが）

初歩的な質問で恐縮なのですが、ご教示いただけますと幸いです。

該当のソースコード

◆html

<div class="slider">

<div class="pc_none"><img alt="" src="image/img_01.png" width="100%" /></div>

<div><img alt="" src="image/img_02.png" width="100%" /></div>

<div><img alt="" src="image/img_03.png" width="100%" /></div>
・
・
・
</div>

◆JS

$("document").ready(function(){
	$('.slider').slick({
		autoplay: true,
		autoplaySpeed: 2500,
		speed: 3000,
		dots: true,
		arrows: false,
		centerMode: true,
		centerPadding: '30%',
		responsive: [{
               breakpoint: 640,
                    settings: {
                         slidesToShow: 1,
                         slidesToScroll: 1,
						arrows: true,
						dots: false,
						centerPadding: '0',
						centerMode: false
                    }
               }
          ]
	});
}); 

試したこと

#slick-slide00,
#slick-slide-control00,
.pc_none{
         display:none !important;
}

無理やり非表示にしてみたのですが、上記の通り二巡目の挙動が一瞬おかしくなります。
（二枚目に移動する際に最初にもどるといいますか…更新かけたみたいな挙動をします）

Answer 1

.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

これと

<div class="slider sp">

<div><img alt="" src="image/img_01.png" width="100%" /></div>

<div><img alt="" src="image/img_02.png" width="100%" /></div>

<div><img alt="" src="image/img_03.png" width="100%" /></div>
・
・
・
</div>
<div class="pc slider">

<div><img alt="" src="image/img_02.png" width="100%" /></div>

<div><img alt="" src="image/img_03.png" width="100%" /></div>
・
・
・
</div>

でうまくいきませんか？

追記

保証はないけど

.sp { display: none !important; }
@media only screen and (max-width: 750px) {
.sp { display: block !important; }
}

<div class="slider">

<div class="sp"><img alt="" src="image/img_01.png" width="100%" /></div>

<div><img alt="" src="image/img_02.png" width="100%" /></div>

<div><img alt="" src="image/img_03.png" width="100%" /></div>
・
・
・
</div>

でうまくいきませんか？

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。やはりスライドごと出し分けするしかないですかね。
内容はほぼほぼ一緒なのでできれば一部だけ出し分けできたらなと思ったのですが…

もう少し募集させてください。