如何爲此幻燈片顯示滑動效果？

Question

​​

我想這給一個滑動效果，而不是僅僅淡入淡出當圖像被改變，但我不知道如何處理這一問題。

我的想法是將所有圖像放在相同的位置，並使一張幻燈片離開屏幕，並使下一張幻燈片進入屏幕。

這是正確的方法，我該如何用代碼啓動它？

PS。我試圖做這個沒有任何JS庫

Answer 1

與當前的代碼，fade-in可以很容易地與CSS動畫。有關起點：

嘗試改變：

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

要：

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