【jQuery】スライダープラグインslickで左右の余白をなくしたい。

前提・実現したいこと

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件

ベストアンサー

とりあえず提示されているCSSだけであれば下記を追加すれば横スクロールは発生しません。
※ slick は ul要素に使わない方がよいです。（処理の結果HTMLの文法を無視することになるため）

CSS
1.center-item {
2  padding: 0;
3}
4```**動くサンプル：**[https://jsfiddle.net/3hfdjda4/](https://jsfiddle.net/3hfdjda4/)

投稿2018/04/14 01:09

kei344

総合スコア69407

doraemoyan

2018/04/14 03:53

ありがとうございました。サンプルのように変更して、左右の余白も消えました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！