为什么我的滑块堆叠在一起？新到滑块

Question

如果我的代码看起来很时髦，我对滑块很抱歉。你能告诉我为什么我的滑块是堆叠在一起而不是像往常一样向左滑动吗？

@keyframes slide {
     0% { left: 0%; }
    20% { left: 0%; }
    35% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: 0%; }
}

.slider{
    width: 100%;
    height: 480px;
}

.slider .slideimg{
    width: 100%;
    height: 480px;
    position: absolute;
    animation: 30s slide infinite;
    overflow: hidden;
}

.slideimg:nth-child(1){
    background-image: url(../images/homeimages/Terminator-Dark-Fate-Banner.jpg);
    background-size: cover;
    background-position: center;
}

.slideimg:nth-child(2){
    background-image: url(../images/homeimages/alladin.jpg);
    background-size: cover;
    background-position: center;
}

.slideimg:nth-child(3){
    background-image: url(../images/homeimages/frozen-ii-2020.png);
    background-size: cover;
    background-position: top;
}


.slider .slideimg:hover, 
.sliderbtn a:hover, .sliderbtn a:visited:hover {
    animation-play-state: paused;
}

<!--- Slider---->
    
    
               <div class="slider">
                   <div class="slideimg">
                        <div class="slidetitle">
                           <h1>Terminator: Dark Fate</h1>
                           <p>Subheader Infor</p>
                           <p class="sliderbtn"><a href="#">Get Ticket</a></p>
                           <p class="sliderbtn"><a href="#">View Trailer</a></p>
                       </div>
                    </div>
                  
                   <div class="slideimg">
                       <div class="slidetitle">
                           <h1>Aladin</h1>
                           <p>Subheader Infor</p>
                           <p class="sliderbtn"><a href="#">Get Ticket</a></p>
                           <p class="sliderbtn"><a href="#">View Trailer</a></p>
                       </div>
                    </div>
    
                   <div class="slideimg">
                       <div class="slidetitle">
                           <h1>Frozen: 2</h1>
                           <p>Subheader Infor</p>
                           <p class="sliderbtn"><a href="#">Get Ticket</a></p>
                           <p class="sliderbtn"><a href="#">View Trailer</a></p>
                       </div>
                    </div>
                   
                    <div class="slideimg">
                        <div class="slidetitle">
                           <h1>Terminator: Dark Fate</h1>
                           <p>Subheader Infor</p>
                           <p class="sliderbtn"><a href="#">Get Ticket</a></p>
                           <p class="sliderbtn"><a href="#">View Trailer</a></p>
                       </div>
                    </div>
                 </div>
    

Answer 1

我正在附加代码。请审查它。如果有任何变化，请告诉我。

这是链接：

https://jsfiddle.net/k4gu0t7v/16/

* {
  padding: 0;
  margin: 0
}

body {
  background-color: #000000;
}

.crossfade>figure {
  animation: imageAnimation 24s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}

.crossfade>figure:nth-child(1) {
  background-image: url('https://picsum.photos/id/1000/1000/500');
}

.crossfade>figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('https://picsum.photos/id/1001/1000/500');
}

.crossfade>figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('https://picsum.photos/id/1075/1000/500');
}

.crossfade>figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('https://picsum.photos/id/1076/1000/500');
}

@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }

  8% {
    animation-timing-function: ease-out;
    opacity: 1;
  }

  17% {
    opacity: 1
  }
  
  25% {
    opacity: 0
  }

  100% {
    opacity: 0
  }

}

.slidetitle {
  padding: 20px;
}

.slidetitle h1 {
  font-size: 40px;
  color: #000
}

.slidetitle p {
  font-size: 20px;
  color: #444
}
.slide-button{
  margin-top:20px;
  display:flex;
}
.sliderbtn{
  margin-right:15px;
}
.sliderbtn{
  border:2px solid #444;
  padding:6px 12px;
  cursor:pointer;
}
.sliderbtn a{
  text-decoration:none;
}
.white{
  color:#fff !important;
}

<div class="crossfade">
  <!--1-->
  <figure>
    <div class="slidetitle">
      <h1>Terminator: Dark Fate</h1>
      <p>Subheader Infor</p>
      <div class="slide-button">
        <p class="sliderbtn"><a href="#">Get Ticket</a></p>
        <p class="sliderbtn"><a href="#">View Trailer</a></p>
      </div>
    </div>
  </figure>
  <!--2-->
  <figure>
    <div class="slidetitle">
      <h1>Aladin</h1>
      <p>Subheader Infor</p>
      <div class="slide-button">
        <p class="sliderbtn"><a href="#">Get Ticket</a></p>
        <p class="sliderbtn"><a href="#">View Trailer</a></p>
      </div>
    </div>
  </figure>
  <!--3-->
  <figure>
    <div class="slidetitle">
      <h1 class="white">Frozen: 2</h1>
      <p class="white">Subheader Infor</p>
      <div class="slide-button">
        <p class="sliderbtn"><a href="#">Get Ticket</a></p>
        <p class="sliderbtn"><a href="#">View Trailer</a></p>
      </div>
    </div>
  </figure>
  <!--4-->
  <figure>
    <div class="slidetitle">
      <h1>Terminator: Dark Fate</h1>
      <p>Subheader Infor</p>
      <div class="slide-button">
        <p class="sliderbtn"><a href="#">Get Ticket</a></p>
        <p class="sliderbtn"><a href="#">View Trailer</a></p>
      </div>
    </div>
  </figure>
</div>