问题标签 [react-slick]

下面是我的代码，在单击下拉项时，调用 this.slickNext() 后，将触发更新事件，并且将重新渲染此类组件。但是 slickNext 方法似乎无需单击即可进行重新渲染，因此会自动按顺序显示第二张幻灯片。

请问我能得到一些帮助吗？谢谢你。

I'm using react-slick and I'd like to add some features to my slider. I need some help to disable the left arrow on the initial state of the slider, since the slider is infinite. Also, I'm displaying 3 elements and I want to add a gradient mask on the 3rd one (the one that is following the current slide - the current slider has class slick-active).

I'm thinking about using jQuery but since this is not a good practice, any feedback would be appreciated.

React-slick: https://react-slick.neostack.com

我iframe在ReactJS. 我在使用 jquery的锚点上添加了一个on click事件侦听器。加载iframe时附加事件。iframe在正常情况下单击可以正常工作，但是当我在轮播中将组件从右向左移动时，然后单击停止工作。

这是我的代码：

我检查了它看起来content()在后一种情况下返回空。我该怎么办？谢谢。

我想把我所有的React-slick slides都包li起来ul。我浏览了文档，发现slideprop 可用于更改container元素。它需要一个包装元素名称为string. 默认值为div，我将其更改为，ul但我仍然将 div 作为容器div。

Codesandbox 链接https://codesandbox.io/s/0xjlvkp9jl

上下文：在应用程序中，我使用 react-slick 允许用户在轮播等组件中导航。（注意：当用户在轮播中导航时，应用程序的 URL 不会更改/更新；始终为https://myApplicationURL.com）

我试图完成的事情：轮播中的每个组件都使用 react-ga 来初始化和跟踪组件级别的页面浏览分析。

我的期望：谷歌分析仪表板将返回用户当前正在查看的正确组件名称。

实际发生的情况： Google Analytics（分析）仪表板显示不正确的组件名称。（例如：应用程序在联系人组件上 - 应显示“/contact”，但 GA 仪表板显示另一个组件名称）

我希望这不是一个“大问题”，但我被困住了。我在github issues#1334上问过这个问题，但我没有得到项目维护者的任何回应。希望我能在这里得到帮助。

概述

我的问题是我正在尝试调整可变宽度滑块（来自react-slick文档），以便：

1. finite

2. responsive（到不同的视口）（如果可能根据视口宽度显示尽可能多的幻灯片）

3. scroll only 100% visible slides

4. 幻灯片应填满div显示区域

观察

1. 到目前为止，我已经成功地做到了：

   • finite

2. 关于responsive，断点不适用于variable width幻灯片。

3. scroll only 100% visible slides, 这在可变视口宽度和使用可变宽度幻灯片时非常重要。

4. slides should fill thedivdisplay area，当它们到达最后一张幻灯片时，有限可变宽度的幻灯片，即使它已经被上一个滚动可见，用户仍然可以滚动并且可见的是一大片空白幻灯片，例如：

编码

该问题可以在代码沙箱中复制和测试

...
...

欢迎任何帮助。

我正在使用 React slick，如果我有一堆小盒子，我通过设置 slidesToScroll 滚动 3 次，它会通过我的容器的宽度。

https://codepen.io/e-man/pen/jvJdjY

如果您在继续单击直到达到 10 时查看右侧，您将看到右侧的所有空白区域。我希望它停止，以便最后一项与右侧齐平。

无论如何要阻止这超出范围。

我想每张幻灯片显示 3 项幻灯片/轮播。例如，我在数组中有六个对象。我正在使用 React 和 React Slick。

我知道我在以下组件中的设置是有效的并且工作正常，但这不是我想要的。我也知道我做了错误的迭代。请查看<li>具有两个<div>并排的包装器。我想在左侧显示一个项目，在另一张幻灯片中显示两个项目。任何想法？

我正在使用与 3 个滑块同步的 react-slick 滑块。使用 2 个滑块可以正常工作，但是当我尝试使用 3 个带有 2 个参考的滑块时，它不起作用。

谢谢

我在我的 React 应用程序中使用 react-slick-slider 插件创建了 3 个图像滑块。所有 3 个都将其自动播放设置为 true，但我想为其中的 2 个滑块添加延迟，以便分别在 1 秒和 2 秒后启动自动播放，以实现“惊人的过渡”效果。

虽然通过使用'setTimeOut'函数在jQuery中实现这一点相当容易，但是，我想学习'react'/'javascript'的做事方式。任何指针将不胜感激。

这是我的组件设置：