質問編集履歴

1 初心者マークと質問場所の変更

doraemoyan

doraemoyan score 1

2018/04/14 09:19  投稿

【jQuery】スライダープラグインslickで左右の余白をなくしたい。
### 前提・実現したいこと
【jQuery】スライダープラグインslickで左右の余白をなくしたい。
slickを初めて使用します。
slickで実装してスライドは問題なく動きますが、左右に不要な余白が出来て、その結果ブラウザに横スクロールが表示されます。
この左右の余白がなぜ表示されるのか原因がわかりません。表示されないようにする方法を教えてください。
### 発生している問題・エラーメッセージ
```
slickを初めて使用します。
slickで実装してスライドは問題なく動きますが、左右に不要な余白が出来て、その結果ブラウザに横スクロールが表示されます。
この左右の余白がなぜ表示されるのか原因がわかりません。表示されないようにする方法を教えてください。
```
### 該当のソースコード
```HTML
ソースコード
<head>
   <!-- CSS -->
   <link rel="stylesheet" href="assets/plugins/slick/slick.css">
   <link rel="stylesheet" href="assets/plugins/slick/slick-theme.css">
</head>
```
```HTML
   <ul class="center-item">
       <li><a href="product.html#product01"><img src="assets/img/slider/slider01.jpg" width="100%" alt=""></a></li>
       <li><a href="product.html#product02"><img src="assets/img/slider/slider02.jpg" width="100%" alt=""></a></li>
       <li><a href="product.html#product03"><img src="assets/img/slider/slider03.jpg" width="100%" alt=""></a></li>
       <li><a href="product.html#product04"><img src="assets/img/slider/slider04.jpg" width="100%" alt=""></a></li>
   </ul>
```
```HTML
   <script src="assets/plugins/slick/slick.min.js"></script>
   <script type="text/javascript">
       $(function() {
           $('.center-item').slick({
               arrows: false,
               autoplay: true,
               infinite: true,
               dots: true,
               slidesToShow: 1,
               pauseOnHover: false,
               centerMode: true,
               centerPadding: '18%',
               responsive: [{
                   breakpoint: 1024,
                   settings: {
                       centerMode: false,
                   }
               }]
           });
       });
   </script>
```
  • jQueryプラグイン

    618 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る