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

Posted 2023-02-25

【中文标题】箭头没有显示在反应光滑的 4 多张照片中

【英文标题】：The arrows does not showing in react slick with 4 and more photos

【发布时间】：2019-02-06 06:54:01

【问题描述】：

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

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

【问题讨论】：

似乎工作正常。当我向示例中添加更多图像时，箭头会出现。codesandbox.io/s/woqj1z2nq8

哦，我只有 4 张照片，而不是 5 张，因为它没有工作

你能告诉我你面临的确切问题是什么吗？据我所知，如果图像数量超过 4 个，则会向左和向右显示箭头。

【参考方案1】：

它对我的工作 CSS 更改

.slick-prev 
  left: 3% !important;
  z-index: 1;

.slick-next 
  right: 3% !important;
  z-index: 1;

【参考方案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