slikスライダーでレスポンシブ時の挙動を直したい。
こんにちは。
pc時は幅いっぱいで980pxの画像をスライドさせています(私のパソコンでは3枚が表示される)。
SP時は1枚を表示したいのですが、ほんの少し下にスクロールするまで、画像が大きい状態で表示されます。場合にもよりますが1秒から10秒はその状態が継続することも。
sp時にスムーズな挙動にすることは難しいでしょか?
ご回答お待ちしております。
追記
大変失礼いたしました。
コードを提示させていただきます。
HTML
1 <div class="visual-index"> 2 <div class="visual-slider"> 3 <div class="visual-area"> 4 <div class="visual-item"> 5 <ul class="visual-slider-list js-index-slider"> 6 98 7 <li><a href="DUMMY"><img src="img/title_DUMMY01.jpg" alt="DUMMY"></a></li> 8 <li><a href="DUMMY"><img src="img/title_DUMMY02.jpg" alt="DUMMY"></a></li> 9 <li><a href="DUMMY"><img src="img/title_DUMMY03.jpg" alt="DUMMY"></a></li> 10 <li><a href="DUMMY"><img src="img/title_DUMMY04.jpg" alt="DUMMY"></a></li> 11 </ul> 12 </div> 13 </div> 14 </div> 15 </div>
css
1.visual-index .slick-slide { 2 max-width: 980px!important; 3} 4@media screen and (max-width: 960px) { 5.visual-index .slick-slide img { 6 width: 100%!important; 7} 8}
js
1$(function load() { 2 $('.js-index-slider').slick({ 3 autoplay: true, 4 speed: 1000, 5 arrows: true, 6 prevArrow: '<span class="slick-prev"></span>', 7 nextArrow: '<span class="slick-next"></span>', 8 centerMode: true, 9 slidesToShow: 1, 10 centerPadding: '0px', 11 variableWidth: true, 12 responsive: [{ 13 breakpoint: 960, 14 settings: { 15 variableWidth: false, 16 slidesToShow: 1, 17 18 } 19 }] 20 }); 21});
いくつかJSをコメントアウトところ、
variableWidth: true
この記述をコメントアウトするとSP時にうまく表示されるようでした。
しかしこの記述がないとPC時にうまくいきません。
記述で間違っていることころ、あるいは解決策をご教授いただけますと幸いです。
回答2件
あなたの回答
tips
プレビュー