如何给这张幻灯片显示滑动效果？

Question

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

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

我的想法是将所有图像放在同一位置，然后从屏幕上滑下一张幻灯片，然后将下一张图片滑入屏幕。

这是正确的方法，我应该如何用代码启动它？

PS。我试图在没有任何JS库的情况下这样做

Answer 1

使用当前代码，可以使用CSS动画轻松完成@keyframes fade { from {opacity: .4} to {opacity: 1} } 。作为起点：

尝试更改：

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

要：

print(lat,long)