CSS3图像滑块，javascript浏览幻灯片不起作用？

我一直在尝试调整以下代码以与我的CSS3滑块集成（使用关键帧设置动画和计时），但是您无法使用。在js中设置动画在同一元素上使用CSS3动画时，我必须使用其中一个

当前js的工作原理是在幻灯片中导航，我唯一的问题是它不会“滑动”到跳转的每一张幻灯片

我真的很想保持幻灯片的原样，只想更新我的js，这样幻灯片转换就可以工作了。我不擅长js，所以我发现很难找到解决方案。 如果有人能为我的问题提供一些建议或解决方案，我将不胜感激

JS

---

我不明白为什么。需要动画，因为我使用了

transition: left 1s ease;

在我的CSS中实现了同样的效果，动画比jQuery更流畅。我尝试删除：

//slide the item
$("#carousel .video-list").animate(...

左边和右边。我还向html div中添加了一些文本，以便您可以看到它如何更好地运行。很抱歉，我不能让它工作，但我真的觉得“过渡”是你需要考虑的。这是答案：）

我认为您最简单的解决方案是放弃整个CSS动画制作，构建您自己的旋转木马： 考虑一个胶片带，它是一排彼此相邻的图片。现在考虑一个纸盒的大小，一张图片。我们把纸条放在纸后面，只看到一张图片。如果我们移动条带，我们可以改变看到的图像

胶片带将是一个div，具有{display:inline block；}属性，包含每个视频。框剪切将是具有{overflow:hidden}属性的div。要移动条带，我们只需在javascript中使用$（'#strip'）.css（{'left'：positionofstripleft-widthofbox}）。对于动画，一个简单的setInterval（Nextfunction，65000）每65秒执行一次单击next的操作

---

最后，CSS转换将使动作真正动画化。

你能做一个吗？我试过做一个，但在某个地方出了问题，我会再试一次。更新了演示，但似乎无法让js在这个JSFIDLE中工作。虽然我知道它确实可以工作，但我显然在这篇文章中遗漏了一些东西。您使用的是jquery，需要在框架中设置它（左边的第一个选择器）啊，我明白了，我知道会是这样的-我现在已经更新了它，这样你就可以看到它在幻灯片中移动，而不是滑到幻灯片上。嘿，谢谢你的回复。我需要在单击“下一步/上一步”时转换生效。e、 g.单击“下一步”，幻灯片将向下一张幻灯片移动。目前，它只是跳到下一张幻灯片。我可以问一下您正在哪个浏览器中查看它吗？单击“下一步/上一步”时，它肯定会滑动吗？滑块位于计时器上，因此它会绕旋转木马旋转，但我希望有导航选项，因此我添加了“下一步/上一步”按钮。我看着你的小提琴，它仍然只是跳到每一张幻灯片上，而不是点击每一张幻灯片？让我问一个重要的问题。当我在第1项中，点击“下一步”进入第2项时，什么东西实际上改变了位置，它们到底去了哪里？好的，我已经更新了小提琴，以便更容易看到。每个色块代表一个视频（我使用的是HTML5视频），基本上，如果你点击项目1的下一步，它会转到项目2——我希望它转换为：例如，轻松1到该幻灯片。这有意义吗？真的很抱歉我刚刚看到你的更新。所以你建议把css关键帧滑块变成jQuery滑块？

//slide the item
$("#carousel .video-list").animate(...