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

Question

我想在两个Slick Carousel项之间添加空间，但不想使用填充的空间，因为它会减小我的元素大小（我不想要那个）。

我想在两个Slick Carousel项之间添加空间，但不希望使用padding的方式，因为这会缩小我的元素大小（而我不希望出现这种情况）。

    $('.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

---

你需要在两端添加或删除空格。 - stanze

你后来解决了这个问题吗？我也遇到了同样的问题。 - aslamdoctor

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)

- Dishan TD

---

这个解决方案非常好，而且可行。 （顺便说一句，这个解决方案也在插件的Github资料中提到，请参考https://github.com/kenwheeler/slick/issues/582） - Mehdi Dehghani

我需要在滑块的容器上加入 overflow: hidden，以防止由于边距导致溢出。 - Patrizio Bekerle

Answer 2

光滑滑块(slick-slide)有一个内部封装的div，您可以使用它来在不破坏设计的情况下创建幻灯片之间的间距：

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

- Sushil Thapa

---

它可以工作，但在动画期间幻灯片可见于滑块之外。 - Sébastien Gicquel

使用React Slick和Styled Components添加了您的建议，它起作用了。 - cssmtnr

Answer 3

自从最新的版本以后，您可以简单地为您的幻灯片添加margin：

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

由于Slick的计算基于元素的outerHeight，所以不需要任何形式的负边距。

- Orlandster

---

你能确认从哪个版本开始出现这种情况吗？ - Rick Davies

它起作用了，但它也在滑块的左右两侧增加了20像素的边距，这不太好看。 - Sébastien Gicquel

Answer 4

@Dishan TD的答案很好，但我只使用margin-left可以获得更好的结果。

为了让每个人都更清楚，请注意这两个相反的数字：27和-27。

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

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

- Pablo S G Pacheco

---

我需要在滑块的容器上放置 overflow: hidden，以防止由于边距而导致溢出。 - Patrizio Bekerle

Answer 5

根据Dishan TD的帖子进行改进（还删除了垂直边距）：

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

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

注意：在我的情况下，pointer-events是必需的，以便能够单击左箭头。

- ling

Answer 6

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

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

- Sopo

Answer 7

只需修复CSS：

/* the slides */
.slick-slider {
    overflow: hidden;
}
/* the parent */
.slick-list {
    margin: 0 -9px;
}
/* item */  
.item{
    padding: 0 9px;
}

- Anh Hoai Vui Le

Answer 8

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

因此，您可以使用以下代码：

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

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

- Bruno Ribeiro

Answer 9

只需在 slick-side 类上添加 padding 即可。

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

- Chhun Socheat

Answer 10

通过伪类去除了第一个和最后一个子元素的边距，并在脚本中使用了“自适应高度 true”。试试这个fiddle吧。

再来一个演示。

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

- stanze

---

我已经检查了你的两个fiddles，当我切换到下一个项目时，它会显示第一和第二个项目的空间。实际上，我正在尝试在可视区域内去除该空间（边距空间），并将可视部分的整个宽度用于单个项目。 - Sopo

这是正确的答案。自适应宽度和高度帮助解决了我的问题。 - Danny