前提・実現したいこと
slickを初めて使用します。
slickで実装してスライドは問題なく動きますが、左右に不要な余白が出来て、その結果ブラウザに横スクロールが表示されます。
この左右の余白がなぜ表示されるのか原因がわかりません。表示されないようにする方法を教えてください。
発生している問題・エラーメッセージ
該当のソースコード
HTML
1ソースコード 2<head> 3 <!-- CSS --> 4 <link rel="stylesheet" href="assets/plugins/slick/slick.css"> 5 <link rel="stylesheet" href="assets/plugins/slick/slick-theme.css"> 6</head>
HTML
1 <ul class="center-item"> 2 <li><a href="product.html#product01"><img src="assets/img/slider/slider01.jpg" width="100%" alt=""></a></li> 3 <li><a href="product.html#product02"><img src="assets/img/slider/slider02.jpg" width="100%" alt=""></a></li> 4 <li><a href="product.html#product03"><img src="assets/img/slider/slider03.jpg" width="100%" alt=""></a></li> 5 <li><a href="product.html#product04"><img src="assets/img/slider/slider04.jpg" width="100%" alt=""></a></li> 6 </ul> 7
HTML
1 <script src="assets/plugins/slick/slick.min.js"></script> 2 <script type="text/javascript"> 3 $(function() { 4 $('.center-item').slick({ 5 arrows: false, 6 autoplay: true, 7 infinite: true, 8 dots: true, 9 slidesToShow: 1, 10 pauseOnHover: false, 11 centerMode: true, 12 centerPadding: '18%', 13 responsive: [{ 14 breakpoint: 1024, 15 settings: { 16 centerMode: false, 17 } 18 }] 19 }); 20 }); 21 </script> 22 23
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/14 03:53