Slick Slider在中心仅显示1个项目，向左和向右显示溢出

Question

我正在尝试使用Slick Slider制作一个滑块，该滑块将在容器的中心显示宽度为50％的“滑块”。我希望其余的50％显示在任一侧。我希望箭头出现在中心。

我正在尝试实现这种效果：

当我将容器的宽度设置为50％，并在开发人员工具中应用此CSS时，我得到了预期的结果：

.slick-list { overflow: visible; }

但是，一旦我滚动，就会重置一些内容，并且溢出会消失。

Answer 1

尝试一下：

.slick-slider {
    width: 200%;
    margin-left: -50%;
}

.slick-prev {
    margin-left: 25%;
    z-index: 1;
}

.slick-next {
    margin-right: 25%;
    z-index: 1;
}

您需要确保CSS规则会覆盖Slick轮播设置的现有规则，因此您可能需要在CSS选择器中更具体一些，但请尽量不要在所有地方使用!important。您可以在此处将css类与轮播容器的css类一起放在前面。

Answer 2

我最终采取了另一种方法。我发现此设置variableWidth: true使得slidesToShow: 1设置使用了多余的空白，而不是限制容器的宽度。从那里开始，我使用此CSS相对于容器的宽度定位上一个/下一个箭头：

 .carousel-container .slick-next {
    right: calc((100vw - 630px)/2)
  }

  .carousel-container .slick-prev {
    left: calc((100vw - 630px)/2)
  }

之所以可行，是因为每张幻灯片的宽度相同（由于这个原因，variableWidth属性具有误导性）。