Slick滑动插件：如何将箭头设置在内部而不是外部？

Question

嗨，我发现Slick Slider非常易于使用，并决定在我一直在工作的网站上使用它：http://smallbuildersdev.esy.es/

您可以在页面底部看到幻灯片。我只有一个问题。 我想让箭头位于滑块内部而不是外部（这也意味着当内容滑入时，它会从一个不可见的硬边缘滑动）。 有没有办法将箭头放在内部，以便我可以占用整个页面的宽度（因此在滑动时不会显示任何硬边缘）？这是Slick Slider的链接：http://kenwheeler.github.io/slick/

如果您也查看了Slick Slider网页，则左/右箭头位于滑块之外。

- Angel Angeles III

Answer 1

给UberKaeL的答案添加z-index：1，以强制将prev-arrow显示在图片顶部

.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*/
}

- Panoman

---

这些答案都没有解决问题。如果你调整窗口大小，它们就无法正确显示。 - Sergi

Answer 2

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

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

- UberKaeL

---

在响应式设计中，使用百分比（2％〜3％）非常有效。 - Ark74

如果您无法看到箭头，请使用z-index: 10; - Steve Moretz

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*/
}

- barrypicker

---

我怀疑这是因为您在页面添加默认的slick CSS之前添加了覆盖的CSS。 - Tom John

Answer 4

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

- Gökhan Çınar

---

请提供更多详细信息以回答问题。 - Skoua

Answer 5

为了避免在样式表中添加!important，可以将.slick-arrow类添加到您的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*/
}

- Nate S.