slick sliderで横幅100%/縦600pxのレスポンシブのスライダーを作成したいのですが、各スライドと画像は横幅1200px/縦600pxで最大値を固定したいです。
横幅1200px以上の大きいディスプレイで確認すると、画像を1200px × 600pxで固定しているのでスライドに余白がでてしまいます。
左右をチラ見せするためにcenterMode: true,をしているのですが、
ウィンドウを大きくした際に、各スライドの横幅最大値を1200pxにして常に中央配置にして左右に前後のスライダーを表示させるにはどうすればいいのでしょうか?
centerPaddingで余白を大きく取る方法しかないのでしょうか?
よろしくお願い致します。
htnl
<div class="top-slider"> <div class="slide-elm"> <a href=""> <img src="sample.jpg" alt=""> </a> </div> <div class="slide-elm"> <a href=""> <img src="sample.jpg" alt=""> </a> </div> <div class="slide-elm"> <a href=""> <img src="sample.jpg" alt=""> </a> </div> </div>
JS
$('.top-slider').slick({ infinite: true, autoplay: true, dots: false, slidesToShow: 1, slidesToScroll: 1, centerMode: true, responsive: [{ breakpoint: 768, settings: { centerMode: false, } }] });
回答1件
あなたの回答
tips
プレビュー