滑块：图像上的图像动画

Question

我如何让图像动画超越另一个（而不是让它  白色背景）

到目前为止我的滑块代码：

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2500);    
}

.w3-animate-left{position:relative;animation:animateleft 0.5s}@keyframes animateleft{from{left:-100px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-100px;opacity:0} to{right:0;opacity:1}}

<div>
  <img class="mySlides w3-animate-left" src="http://lorempixel.com/400/400/nature/3/" >
  <img class="mySlides w3-animate-right" src="http://lorempixel.com/400/400/nature/2/" >
</div>