滑动项目之间的边距（或更多项目宽度）较低

Question

我努力实现这一目标，我想要的是要降低物品之间的空间，我不明白为什么每个物品都很小，我只需要一个例如。每个之间10px的边距，或每个32％的宽度。

我已经搜索过（https://github.com/kenwheeler/slick/issues/582，How add spaces between Slick carousel item），但没有一个能解决我的问题。

＆＃13;

＆＃13;

$('.slick-slider').slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: true,
  autoplay: true,
  autoplaySpeed: 3000,
});

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class='slick-slider text-center'>
    <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>1</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>2</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>3</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>4</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>5</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>6</h6>
      <a href="#">know more</a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为它会起作用

＆＃13;

＆＃13;

$('.slick-main').slick({
  arrows: true,
    slidesToShow: 3,
  	slidesToScroll: 3,
    autoplay: true,
    dots: true,
    autoplaySpeed:2500,
    speed: 500,
});

＆＃13;

.inner-item{
  background: orange;
}
.item {
  padding: 0 5px;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class='slick-main text-center'>
   <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>1</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>2</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>3</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>4</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>5</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>6</h6>
      <a href="#">know more</a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Fiddle