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

Posted

技术标签:

【中文标题】当我在视图中添加两张幻灯片时,React-slick 在 DOM 中显示 5 个幻灯片元素【英文标题】:React-slick shows 5 slide elements in DOM when i have added two slides in view 【发布时间】:2019-10-18 15:57:16 【问题描述】:

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

仅渲染一个元素没有这个问题。它只显示 DOM 中的单个元素。

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

有什么方法可以移除 DOM 中的克隆幻灯片元素吗?

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

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

`

【问题讨论】:

【参考方案1】:

看来您只需将 infinite:false 属性传递给选项即可解决问题。

这是因为 react slick 在视图中当前元素的两侧维护了两个 div。这是为了确保即使用户双向滚动也能发生滑动。

传递这个属性会否定这种行为

【讨论】:

以上是关于当我在视图中添加两张幻灯片时,React-slick 在 DOM 中显示 5 个幻灯片元素的主要内容,如果未能解决你的问题,请参考以下文章

mvc怎么在一个视图里显示两张表啊

如何在 Swift 3 中刷新视图

iCarousel 每次触摸显示一个视图(幻灯片)

如何在幻灯片中添加滚动动画?

Xamarin 表单列表视图添加幻灯片功能

如何在覆盖 UIView 之前停止幻灯片过渡到 Second VC?