为什么我的html幻灯片仅显示我的图像之一？

Question

我正在尝试仅使用html和css进行自动图像幻灯片播放。我终于找到了一个简单的教程，关于如何制作一个图像，只是我稍微改变了代码以使图像向左移动。现在，我面临的问题是我的2张图像中只有1张显示。为什么会这样？

.maincontainer{
    position: relative;
    width:100%;
    height:500px;
    overflow:hidden;
}
.maincontainer > img{
    position:absolute;
    float: left;
    animation: sliding 20s infinite;
    left:0;
    width: 100%;
    height:auto;

}
@keyframes sliding{
   0%{left:0px}
   10%{left:0px}
   20%{left:-700x}
   30%{left:-700px}
   40%{left:-1200px}
   50%{left:-1200px}
   60%{left:-1500px}
   70%{left:-1500px}
   80%{left:-2400px}
   90%{left:-2400px}
   100%{left:0px}

}

.sliding {width:100%; height:0px; padding-bottom: 50%; overflow:hidden; position:relative; }

<div class="maincontainer">
    <img src="pictures/stove.jpg" alt="slide1"> 
    <img src="pictures/hp.jpeg" alt="slide2">
 </div>

Answer 1

我遇到了类似的问题，因此我认为这段代码应根据您的问题起作用：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <div class="carousel-inner" style="border-radius: 5px;">

      <div class="item active">
        <a href="#" target="_blank"><img src="Images/oneplus-7-pro-hero-image.jpg" alt="" style="width:100%; height: 375px;" class="img-responsive"></a>

      </div>

      <div class="item">
        <a href="#" target="_blank"><img src="Images/huawei-p30-singapore-prices.png" alt="" style="width:100%; height: 375px;" class="img-responsive"></a>

      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="background: transparent; width: 25px;">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next" style="background: transparent; width: 25px;">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>