Css 滑动条仅在中间显示一项，左右显示溢出

我正在尝试使用滑动条制作一个滑动条，它将在容器中心显示宽度为50%的“滑动条”。我希望剩余的50%显示在两侧。我希望箭头显示在中间

我正试图达到这样的效果：

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

.slick-list { overflow: visible; }

但我一滚动，就会有东西复位，溢出消失。

试试这个：

.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 carousel设置的现有规则，因此您可能需要在css选择器中更加具体，但尽量不要使用

！重要信息

无处不在。您可以在这里使用carousel容器的css类来预先添加css类。

我最终采用了不同的方法。我没有限制容器的宽度，而是发现这个设置

variableWidth:true

使得

slidesToShow:1

设置使用了额外的空白。在此基础上，我使用此CSS相对于容器的宽度定位上一个/下一个箭头：

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

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

---

这是因为每个幻灯片的宽度相同（variableWidth属性因此具有误导性）

…还有？当您尝试实现此效果时会发生什么情况？请在此处发布一些相关代码，说明您迄今为止所尝试的内容，或详细说明您面临的问题。当我将.carousel容器的宽度设置为50%，边距为：0 auto（中间），溢出的项目是隐藏的。我试着用你在这里提到的技术来定位箭头，但是它需要调整以适应更小的屏幕大小。当我应用此CSS时，箭头位于正确的位置，但旋转木马中的每个元素都向左对齐（中心为空白），值得阅读此内容以提出更好的问题：