javascript - 箭头没有显示在反应光滑的 4 多张照片中

Question

当我在 react-slick 上有 4 张或更多照片时，我试图显示下一个和上一个箭头，但它们没有出现。它适用于 3 张或更少的照片。

这是代码的链接。 https://codesandbox.io/s/wyyrl6zz3l

Answer 1

它对我的工作 CSS 更改

.slick-prev {
  left: 3% !important;
  z-index: 1;
}
.slick-next {
  right: 3% !important;
  z-index: 1;
}

Answer 2

这完全是关于幻灯片数量与 slidesToShow 设置的关系。在您的示例中，您只有 4 张幻灯片，并且设置为一次显示 4 张幻灯片；因此不需要箭头。

将 slidesToShow 设置为低于幻灯片的数量，即一次 1，组件会做出相应的响应。

render() {
var settings = {
  dots: true,
  slidesToShow: 1, //if this is less than # of slides, arrows and dots will appear
};

https://codesandbox.io/s/q9o85r7xz6