问题标签 [infinite-carousel]

我正在尝试使用纯 JavaScript构建自己的轮播。

我正在努力寻找添加选项的最有效方法。infinite carousel

由于某些原因，每个元素（照片、通用对象）都必须有一个id

我看到的算法是这样的：

• 您检查旋转木马是否溢出（足够的对象可以容纳整个容器）
• 如果不是：在后面追加第一个元素的副本，然后是第二个元素的副本，依此类推。（但是ids会有问题，因为这个对象会有相同的id）

- 如果用户滚动到最后一个对象（向右），则将第一个 DOM 对象附加到数组后面
- 如果用户滚动到第一个对象（向左），则将最后一个 DOM 子对象添加到数组前面。

这行得通吗？有没有其他有效的方法来做一个无限轮播？

我还听说最好使用 translate 属性而不是更改 left、right 属性，因此 GPU 的工作量会比 CPU 的更多。

是的，我有一个版本为 1.3.2 的旧项目。基本上，问题是当它到达幻灯片的末尾时，它会回滚到第一个 - 通过查看该过程中的所有先前内容。我希望在第 6 次之后转到第 1 次，因为它只是第 1 次幻灯片，而不是返回并查看第 5 次、第 4 次等一直返回到第 1 次，哦，无限循环就是该功能。

我第一次尝试了 Owlcarousel2（https://owlcarousel2.github.io/OwlCarousel2）（交换了 owl.carousel.js 并保留了 owl.theme.css 和 owl.carousel.css）......我的滑块消失了。然后我听说了一个与以前版本兼容的 beta 2.0，但是https://github.com/OwlFonk/OwlCarousel已关闭，我从https://github.com/OwlFonk/OwlCarousel获得了 1.3.3 版，但仍然和添加了 loop:true 属性，仍然没有，有人有 OwlCarousel 2.0.0-beta 吗？

编辑：我发现 2.0.0 beta 的存储库..与 OwlCarousel2 的结果相同，即使它有 2 个 css 像 1.x 版本一样它不起作用。有这个问题的人吗？

我有一个使用无限轮播的网站，在桌面上轮播显示 3 张幻灯片。在移动设备上它只显示 1，这很完美。但是，它按时间顺序显示了第二张幻灯片。有没有办法改变偏移量，让它在移动设备上显示第一个而不是第二个？

我在这里不知所措，我想不出一种方法让实际的第一张幻灯片（根据发布日期）首先出现在移动设备上。

提前谢谢！

我正在尝试使用 algolia在 react 中的 Instantsearch 创建一个无限的siema轮播，但我认为连接器的行为不像 React 组件。我应该期望在此处调用 componentDidMount 吗？建议？想法？

我以前从未构建过 React 滑块，我正在努力使其成为无限循环的幻灯片。目前有两张幻灯片，但我想这样做，以便用户可以单击下一个/上一个按钮，并且幻灯片是无限的，一遍又一遍地重复幻灯片 1 和幻灯片 2。

我为幻灯片内容构建了一个容器，名为Testimonial. 容器的宽度为 800px。

滑块具有next和prev按钮，可让滑块左右移动。

滑块.tsx

我很欣赏任何见解。提前致谢！

我正在用 React JS 构建一个投资组合应用程序，我的一个页面是关于我的页面。我偶然发现了一个 youtube 视频，它使用 vanilla JavaScript 构建了一个无限轮播，并且在我最初的测试期间它有效。但是，当我离开我的“关于我”页面并返回时，它会在我的“关于我”组件“stepNext; src/components/about-me/AboutMe. js:34”。

我选择这条路线的唯一原因是因为我一直无法找到一个半像样的无限轮播模块，具有易于定制的能力。尽管我更希望这样做，但我愿意接受建议和/或解决方案。非常感激！