slickスライダー実装したのですが幅全開にしたいのに前の画像が左だけスペースを取ってしまいますあります。

<html>

<head>
  <meta charset="utf-8">
  <title>Heart_Beat_GIFT</title>
  <link rel="stylesheet" href="./base.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">

  <link rel="stylesheet" href="./top.css">
</head>

<body>
  <header class="top_header_wrapper">

    <div class="">

      <span>
    hearbeat-Gift
    </span>

      <span>
    tel
    </span>

      <span>
    mail
    </span>
      <ul class="slider">
        <li>
          <img src="./images/star1.gif" alt="" class="top_carousel_images">
        </li>
        <li>
          <img src="./images/star2.png" alt="" class="top_carousel_images">
        </li>

        <li>
          <img src="./images/star3.png" alt="" class="top_carousel_images">

        </li>
        <li>
          <img src="./images/star4.png" alt="" class="top_carousel_images">

        </li>
      </ul>
    </div>

  </header>

  <main>

    <article class="side_length">
      <div class="side_length_limit">
        <h1></h1>
        <ul class="top_gyarally_container">
          <li>
            <img src="./images/star1.gif" alt="" class="top_gyarally_images">
          </li>
          <li>
            <img src="./images/star1.gif" alt="" class="top_gyarally_images">
          </li>

          <li>
            <img src="./images/star1.gif" alt="" class="top_gyarally_images">

          </li>
          <li>
            <img src="./images/star1.gif" alt="" class="top_gyarally_images">

          </li>
        </ul>

      </div>
    </article>

    <footer>

    </footer>
  </main>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <script>
    $(function() {
      $(".slider").slick();
    });

    $(".slider").slick();
  </script>

</body>

</html>

コード

  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.top_header_wrapper {

}
.slider{
    background-color: red;
    
}
.top_carousel_images {
  margin-left: auto;
  margin-right: auto;
}
.slick-prev{
  left: 0;
}
.slick-next{
  right: 0;
}

.slick-prev, .slick-next {
  width: auto;
  transform: none;
  z-index: 1;
  /*background-color: black;*/
}

.slick-prev:before, .slick-next:before {
  color: black;
  font-size: 95px;
  line-height: 0;
}

.top_gyarally_images {
  width: 130px;
  height: 130px;
}

.top_gyarally_container {
  display: flex;
  flex-wrap: wrap;
}

コード

.slick-slideなどのクラスがあたっているliが幅を全開にとっていなくて、ひとつ前のliによって少し幅を占有されています。
これはslickの仕様なのでしょうか？

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

回答1件

ベストアンサー

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

投稿2017/09/16 15:33

kei344

総合スコア69398

tokyodesk

2017/09/17 10:57

chromeのユーザーエージェントのせいだったんですね。 ulにpadding: 0;つけたら直りました！ありがとうございます！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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

slickスライダー実装したのですが幅全開にしたいのに前の画像が左だけスペースを取ってしまいますあります。

関連した質問