如何在 Slick 轮播项目之间添加空格

Question

我想在两个光滑的轮播项目之间添加空间，但不想要带有填充的空间，因为它会减小我的元素大小（我不想要那个）。

     $('.single-item').slick({
        initialSlide: 3,
        infinite: false
    });

 .slick-slider {
    margin:0 -15px;
}
.slick-slide {
    padding:10px;
    background-color:red;
    text-align:center;
    margin-right:15px;
    margin-left:15px;
}

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12" style="background-color:gray;">
            <div class="slider single-item" style="background:yellow">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </div>
</div>

不知何故，我从双方都获得了空间，我正在尝试删除它。

原文由 Sopo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，我找到了dis问题的解决方案。

• 从两侧创建 一个具有额外宽度的滑块框（我们可以使用它来从两侧添加项目空间）。
• 从两侧创建具有适当宽度和边距的 内部项目内容（这应该是您的实际包装尺寸）
• 完毕

原文由 Sopo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

  /* the slides */
  .slick-slide {
      margin: 0 27px;
  }

  /* the parent */
  .slick-list {
      margin: 0 -27px;
  }

这个问题在插件的 github 上报告为问题 (#582)，顺便说一下，这个解决方案也在那里提到，( https://github.com/kenwheeler/slick/issues/582 )

原文由 Dishan TD 发布，翻译遵循 CC BY-SA 4.0 许可协议