お世話になっております。
問題点
slickを使用したスライドショーで、スマホで表示崩れが起こってしまいます。
以下、問題のスクリーンショットです。
*情報を黒字で隠してあります
*青線がsp表示の右端です。
画像のように、スライド領域が青線を超えてしまっていることが原因で表示が崩れています。
理想
sp表示の幅に、スライド領域が収まるようにしたいです。
コード
javascript
1$('.slider').slick({ 2 centerMode: true, 3 centerPadding: '300px', 4 focusOnSelect: true, 5 dots: true, 6 accessibility: true, 7 initialSlide: 1, 8 infinite: true, 9 variableWidth: true, 10 focusOnSelect: true, 11 prevArrow: '<div class="slider-arrow slider-prev"><img src="oooo"></div>', 12 nextArrow: '<div class="slider-arrow slider-next"><img src="oooo"></div>', 13 responsive: [{ 14 breakpoint: 480, 15 settings:{ 16 centerPadding: '0px', 17 focusOnSelect: true, 18 centerMode: true, 19 variableWidth: false 20 } 21 }] 22 });
環境
Google Chrome
sp表示はDeveloper Toolsで見ていますが、実機でも同じ表示でした。
コード
回答1件
あなたの回答
tips
プレビュー