前提・実現したいこと
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; }
無理やり非表示にしてみたのですが、上記の通り二巡目の挙動が一瞬おかしくなります。
(二枚目に移動する際に最初にもどるといいますか…更新かけたみたいな挙動をします)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/11/29 02:30