Slick Slider：如何在内部而不是外部设置箭头？

Question

嗨，我发现 slick slider 真的很容易使用，所以决定在我一直在做的网站上使用它：http://smallbuildersdev.esy.es/

您可以在页面底部看到滑块。我只有一个问题。我希望箭头位于滑块内部而不是外部（这也意味着当内容滑入时，它会从不可见的硬边缘滑出）。有没有办法把箭头放在里面，这样我就可以占据页面的整个宽度（这样滑动时就不会看到硬边了）？这是 link 到光滑的滑块：http://kenwheeler.github.io/slick/

如果您还查看了光滑的滑块网页，left/right 箭头在滑块外部。

Answer 1

我认为您可以简单地更改 CSS 样式。

.slick-prev {
    left: 100px;
    background: red; /*to notice it, is white*/
}
.slick-next {
    right: 100px;
    background: red; /*to notice it, is white*/
}

Answer 2

将 z-index: 1 添加到 UberKaeL 的答案中以强制在图像顶部显示上一个箭头

.slick-prev {
  left: 100px;
  background: red; /*to notice it, is white*/
  z-index: 1;
}
.slick-next {
  right: 100px;
  background: red; /*to notice it, is white*/
}

Answer 3

我尝试了接受的答案，发现我的 css 没有生效。我最终使用 !Important 使箭头可见...

.slick-prev {
    left: 100px !important;
    background-color: red  !important; /*to notice it, is white*/
}
.slick-next {
    right: 100px !important;
    background-color: red  !important; /*to notice it, is white*/
}

Answer 4

为避免必须将 !important 添加到您的样式表，请将 .slick-arrow class 添加到您的 css.

.slick-arrow.slick-prev {
  left: 100px;
  background: red; /*to notice it, is white*/
  z-index: 1;
}
.slick-arrow.slick-next {
  right: 100px;
  background: red; /*to notice it, is white*/
}

Answer 5

.yourclass{
  .slick-prev {
    left: 100px;
    background: white;
  }
  .slick-next {
    right: 100px;
    background: white;
  }
}

Slick Slider：如何在内部而不是外部设置箭头？

Slick Slider: How to set arrows inside and not outside?

html

jquery

slider