如何在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>

不知何故,我从两边获得空间,我试图删除它.

Answer 1

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

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

Answer 2

从最新版本开始，您只需margin在幻灯片中添加一个：

.slick-slide {
  margin: 0 20px;
}

不需要任何类型的负边距，因为 slick 的计算是基于元素的outerHeight。

Answer 3

@Dishan TD的答案很好,但是我只使用margin-left获得了更好的结果.

为了让其他人更清楚,你必须注意两个相反的数字:27和-27

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

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

Answer 4

是的，我已经找到了这个问题的解决方案。

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

Answer 5

只需将 padding 添加到 slick-side 类即可

.slick-slider .slick-slide {
  padding: 0 15px;
}

Answer 6

光滑的幻灯片具有内部包装div，可用于在幻灯片之间创建间距而不会破坏设计：

.slick-list {margin: 0 -5px;}
.slick-slide>div {padding: 0 5px;}

Answer 7

基于 Dishan TD 的帖子的改进（也删除了垂直边距）：

  .slick-slide{
    margin-left:  15px;
    margin-right:  15px;
  }

  .slick-list {
    margin-left: -15px;
    margin-right: -15px;
    pointer-events: none;
  }

注意：就我而言，指针事件是必需的，以便能够单击左箭头。

Answer 8

如今，gapflexbox 的属性已经得到了相当不错的支持：https ://caniuse.com/flexbox-gap

所以你可以使用这个：

.slick-track {
    display: flex;
    gap: 1rem;
}

它只会在元素之间添加空间。