问题标签 [react-slick]

我通过 react-slick 创建了一张推荐幻灯片。

我的代码是：

一切正常。但是，当我调整浏览器的大小时，幻灯片的宽度不会改变。我检查了我的 console.log，slick-track 的宽度总是 9900px。我认为调整浏览器大小时应该更改宽度。

谁能帮我解决这个问题？我认为在 reactjs 中调整浏览器大小时重新渲染元素有问题:(。

谢谢

我正在使用反应光滑的滑块。问题在于项目顺序：第一个项目呈现为最后一个。但是，如果无限为假，则缺少第一项，最后一项是空白。

我搜索但找不到这样的问题。没有任何错误。我正在使用缩略图模式，示例代码在这里： https ://react-slick.neostack.com/docs/example/custom-paging/

我添加react-slick到我的项目中以显示carousel. 我想使用位于滑块内容顶部的自定义下一个和上一个按钮来控制我的滑块。所以我遵循了自定义箭头文档，但我不想在光滑的内容中显示我的按钮，我想将控件提供给滑块内容上方的按钮。如何做到这一点？我从我创建的组件中包含了我的代码。

我使用了反应光滑的 PrevNextMethod
https://react-slick.neostack.com/docs/example/previous-next-methods

我将 Infinite 设置为 false 所以，轮播中不会显示循环。现在，如果在当前显示幻灯片之前没有可用的幻灯片，我想禁用上一个按钮，或者禁用下一个按钮，反之亦然..

官方文档中没有选项。有没有办法做到这一点？

我正在制作一个带有 html5 视频和音频的轮播。一切正常，但是当我点击选项按钮（三个点按钮）时，播放器消失了。视频和音频都会发生这种情况，仅在轮播内部，播放器在外部工作正常。

我已经使用了该react-slick组件，这是我的简单代码：

我认为这个问题与transform: translate3d(-500px, 0px, 0px)slick 用来在幻灯片中滚动的（500px 只是一个例子）有关。我试图将 3d 转换添加到播放器的包装（在轮播之外），这破坏了覆盖的位置（下载/点在三个点上单击打开）。有没有办法来解决这个问题？

先感谢您。

嗨，我使用 react-slick 滑块进行了一些自定义。

我有两个 png 点图标，可以动态更改（用户可以从管理部分更改并将前端作为 API 数据返回）

是否可以添加活动图标，需要将默认点图标更改为活动点图标

我正在尝试找到一种垂直居中或以其他方式为我的 react-slick 滑块添加空间的方法，以便在幻灯片悬停时显示框阴影。目前，似乎正在自动计算高度，并且slick-list包装器具有计算出的幻灯片高度的内联样式。

我有什么办法可以覆盖或以其他方式绕过内联高度或设置，以便我可以显示我的盒子阴影overflow:hidden？slick-list

当前（框阴影变为红色以获得更好的可见性）：

想要的会更接近这个，你可以看到阴影的底部。我通过在浏览器中手动编辑高度得到了这个：

我正在为我的项目使用 React-Slick ( https://github.com/akiran/react-slick )。我希望能够动态更改提供给滑块的设置。

对于 slickjs ( https://github.com/kenwheeler/slick )，可以使用slickSetOption.

阅读文档后，我意识到这在 React Slick 中是不可能的。以下内容也由该插件的一位贡献者发布：

slickSetOption 不会被实现，这些效果是通过从包装器组件中通过 state 传递 props 来实现的

这让我认为实际上应该可以以动态方式更改滑块的设置。

我的实现看起来像这样

使用 React Slick 的游乐场，我把它放在一起来演示这个问题： https ://codesandbox.io/s/react-slick-playground-unyot

我在这里想念什么？

问题：

我将 react-slick 与 react-preload-image （两者的最新版本）结合使用来创建具有多个滑块导轨的页面。这个想法是按类别显示我的投资组合，因此我使用 react-slick 列出每个类别以显示图像，并使用 react-preload-image 显示预加载图像，然后显示投资组合图像。

好消息是，只要我不调整浏览器窗口的大小，它就会看起来很棒，并且完全符合我的要求。坏消息是，当我缩小浏览器窗口（减小宽度）时，应用程序完全崩溃 - 空白屏幕，控制台中有很多丑陋的消息，如下所示：

问题似乎发生在 react-preload-image 上。每张图片我都会得到其中一个条目（所以 40 张图片，其中 40 个警告）。

我已经以几种不同的方式对其进行了重构以尝试解决此问题，但均无济于事。这是我的组件及其代码：

PortCatRails.js - 创建所有导轨

PortfolioRail.js - 使用 react-slick 创建每个导轨

PortfolioRailItem.js - 轨道中每个投资组合项一个组件

ImageWithPreloader.js - 显示带有预加载器的给定图像

最后一条线索： 正如我所说，我只有在缩小浏览器窗口时才会收到错误消息，而且只有在它遇到设置中的一个断点时才会出现错误，所以这不是巧合。我只是不知道在这一点上如何处理它。

如果有人见过这样的东西，我很想知道它的修复方法。这是迄今为止我唯一喜欢的图像预加载器（我已经尝试了几个）。

谢谢！

我正在使用 react-slick，我试图找到解决方案以在单击最后一张幻灯片时转到初始幻灯片

我已经尝试添加afterChange，beforeChange并添加slickGoto(0)如果nextslide等于last-slide-num.Actually没有发生我已经经历了这个......但这还不够

这是设置

预计应该进入初始幻灯片