问题标签 [react-slick]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
723 浏览

reactjs - 当我在视图中添加两张幻灯片时,React-slick 在 DOM 中显示 5 个幻灯片元素

我在滑块中有两个元素。我注意到它实际上创建了另外 5 张幻灯片。它们的数据索引从 -1 到 3 不等。

在此处输入图像描述只渲染一个元素没有这个问题。它只显示 DOM 中的单个元素。

我正在渲染的组件位于位置 1。

有没有办法删除 DOM 中的克隆幻灯片元素?

我遇到的问题是位置 -1 和 3 的幻灯片有一个具有相同 ID 的 div。

现在,当我这样做时document.getElementById(),我看不到实际组件的属性。

`

0 投票
1 回答
1731 浏览

javascript - React-Slick 不适用于 React 中的第一次渲染

我正在尝试添加React-Slick应用程序,但不知何故我失败了,实际上我在应用程序中添加待办事项,然后在滑块中显示待办事项列表。当我存储一些待办事项时,我正在从服务器获取数据并在第一次尝试时将其显示在滑块中,但当我再次尝试时,它会显示。我将分享我的代码,请您检查并纠正我的问题。

代码

0 投票
1 回答
1333 浏览

javascript - 如何将 React.jsx 文件导入我的 HTML?

所以我一直在尝试从我的 jsx 我的 html 文件中导入图像轮播。我已将必要的脚本添加到我的 .html 和“npm install react-slick carousel”中。加载浏览器后什么都没有出现。帮小弟解围。到目前为止,这是我的代码。

HTML 文件

JSX 文件

0 投票
1 回答
1388 浏览

swipe - react-slick 有问题。在手机上滑动不起作用

我遇到了 react-slick 的问题。我需要让它在移动设备上“滑动”。不幸的是swipeToSlide: true,,我在文档中找到的似乎不起作用。

有什么解决办法吗?

这是我的设置代码示例:

0 投票
0 回答
139 浏览

javascript - slick-carousel scss 无法与使用 webpack 作为捆绑器的 react-slick 一起正常工作

当我为 slick-carousel 使用 CDN 时,它工作正常,但是当我从 npm 下载它并像这样导入它时:-

https://github.com/akiran/react-slick/issues/669

它不起作用。

由于这个原因,它的一些工作原理:-

https://www.npmjs.com/package/resolve-url-loader

但仍然不显示图像(css问题)

如何导入 slick-carousel 使其不会中断并且工作方式与使用 cdn 完全一样。

0 投票
2 回答
2555 浏览

javascript - 使用图像之间的适当间距自定义 Slick 滑块设计

我正在使用react-slick轮播功能。我很难定制以获得如下所示的设计。

在此处输入图像描述

如果我尝试在屏幕截图中提供图像之间的空间,其他图像就会被推开并完全消失。

这是我的代码:

我也有关于代码沙盒的工作代码。在这里,https://codesandbox.io/s/react-slick-playground-yqcm3

0 投票
1 回答
82 浏览

css - 背景大于 Circle Div CSS 的问题

我尝试使用 React Slick 自定义点,并遇到背景颜色的问题。这是我设置样式的方法。

这就是结果。背景实际上比带有 的圆圈大border-radius: 50%。由于点彼此相邻,因此很容易指出一个比其他点大,这很奇怪。有什么办法可以解决吗?

在此处输入图像描述

0 投票
0 回答
388 浏览

javascript - React-Slick 与 IntersectionObserver 的行为不符合预期

我正在尝试通过使用APIreact-slick检测幻灯片元素何时与我的根元素相交来在幻灯片进入视口时为其设置动画。IntersectionObserver

这按预期工作。

不起作用的是,当从to react-slick循环回时,第一个反应组件似乎在“赶上”之前暂时失去了状态——即使它已经被渲染了。:last-slide:first-slide

我已经在两个地方演示了这一点,一次使用原生 IntersectionObserver API,一次使用围绕原生 API 的 React Wrapper - react-intersection-observer

到目前为止,我所拥有的完整代码在下面和这里的沙箱中:

原生:https
: //codesandbox.io/s/react-slick-and-native-intersection-observer-cqtmv React Wrapper:https ://codesandbox.io/s/react-slick-and-react-intersection-observer- qvbum

0 投票
1 回答
601 浏览

reactjs - React slick how to enable no pause

i am trying to create infinite slideshow without pause this are my settings for the react-slick slider

this is the closest i was able to achieve but i'm still getting a slight pause

i would like to know if this even possible with react-slick or maybe there are other libraries that will match my needs

0 投票
1 回答
1303 浏览

javascript - 初始化后添加更多图像时,React-slick 滑块会失真

我正在使用 React-slick 滑块来显示随机用户 API 给出的图像。我按照反应滑块的 npm 页面上给出的步骤安装了光滑的轮播并将两个 CSS 文件添加到组件中。

如果用户单击下一个箭头或将滑块向左拖动,我想向现有滑块添加更多图像,因此我使用afterChange回调来更新我的状态,以便使用此状态值作为第二个参数的 useEffect调用然后将以前的数据与新数据连接起来。

在这里,我注意到当用户单击下一步或将滑块向左拖动时,有时会出现失真。

https://stackblitz.com/edit/react-nlxodz有一个滑块和它下面的一个文本行,连续滑动滑块,你可以看到在几秒钟内,滑块下面的文本被推得更远,然后来了回到原来的地方。

如果滑块上有 flex 道具,文档建议使用以下 CSS。但是,我的代码没有弹性属性。

这个问题是因为我将数据添加到滑块的方式还是 CSS 的问题?当用户快速滑动或滑动时,是否存在不显示失真的解决方案?