Slick轮播组件项间距调整：如何设置10px间距或32%项宽

嘿，我太懂调Slick间距的头疼感了！看了你的代码，发现几个小细节影响了效果，咱们一步步来搞定：

首先，你给每个幻灯片都用了和容器一样的slick-slider类，这会导致样式冲突，先把幻灯片的类改成slide-item，避免混淆。

接下来给你两种实现需求的方案，选哪种都行：

方案1：设置固定10px间距 #

这种方法通过给幻灯片加内边距，同时调整容器的外边距避免横向滚动条，最稳妥：

修正后的HTML #

<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="slide-item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>1</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slide-item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>2</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slide-item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>3</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slide-item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>4</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slide-item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>5</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slide-item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>6</h6>
      <a href="#">know more</a>
    </div>
  </div>
</div>

添加自定义CSS #

/* 抵消幻灯片的内边距，避免容器出现横向滚动条 */
.slick-slider .slick-list {
  margin: 0 -5px;
}

/* 给每个幻灯片加左右5px内边距，实现10px的间距 */
.slick-slider .slide-item {
  padding: 0 5px;
}

/* 给内部元素加背景，方便直观看到间距效果 */
.inner-item {
  background-color: #f5f5f5;
  padding: 15px;
}

JS代码保持不变 #

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

方案2：设置幻灯片宽度为32% #

如果更倾向于按百分比控制宽度，用calc计算精确宽度同时预留间距：

.slick-slider .slick-list {
  margin: 0 -1%;
}

/* 3个幻灯片各占32%，左右各1%间距，刚好填满容器宽度 */
.slick-slider .slide-item {
  width: 32%;
  margin: 0 1%;
}

.inner-item {
  background-color: #f5f5f5;
  padding: 15px;
}

为什么之前的方法没生效？ #

很大概率是因为你给幻灯片用了和容器相同的slick-slider类，导致Slick默认样式覆盖了自定义样式；另外直接加margin却不调整容器的话，会导致幻灯片被压缩、出现横向滚动条，上面的方案已经帮你规避了这些问题。

内容的提问来源于stack exchange，提问作者Hula Hula