Javascript 如何使此幻灯片放映具有滑动效果？

我试图给它一个滑动效果，而不是仅仅淡入淡出时，图像正在改变，但我不知道如何处理这个问题

我的想法是把所有的图像放在同一个位置，让一张幻灯片从屏幕上滑下来，让下一张幻灯片滑到屏幕上

这是正确的方法吗？我应该如何从代码开始

---

另外，我尝试在没有任何JS库的情况下使用当前代码来实现这一点，

淡入

可以通过CSS动画轻松完成。作为起点：

尝试更改：

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

致：

---

非常感谢。有没有办法把这些幻灯片连接起来？你的解决方案很好，但是当前幻灯片在滑动时会立即消失。是的，这让你来检查它是如何工作的。

Tryit编辑器

中的代码已经用JS捕获了滑出元素，并将其

display

属性设置为

none

。这会立即将其从DOM中删除。您需要对此进行更改以使元素滑出，然后将其从DOM中删除。滑出效果是否也必须出现在淡入淡出动画中，还是创建另一个称为滑出的动画更好？这是我到目前为止尝试过的，但下一个元素在再次出现之前会滑出。我做错了什么？

@keyframes fade {
  from {transform: translateX(100vw)} 
  to {transform: translateX(0)}
}