html - 如何覆盖 CSS slider 动画——带 NAV 的纯 CSS slider ？

Question

我正在尝试创建一个带有 NAV 按钮的纯 CSS 自动动画 slider 。 slider 动画和导航单独使用时效果很好，但当我将它们组合在一起时，自动动画会超过导航系统，我无法使用导航按钮在幻灯片之间移动。我怎样才能阻止动画压倒导航，以便我可以在幻灯片之间移动，同时仍然保持自动滚动条？这是我的代码

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: left 2s;
  animation: 20s slidy infinite;
}

.slider figure .slide {
  width: 25%;
  float: left;
}

.slider figure img {
  width: 100%;
  height: 300px;
}

.button_container {
  position: relative;
  top: -30px;
  text-align: center;
}

.slider_button {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0px 15px;
}

#slide-1:target~.slide_container {
  left: 0%;
}

#slide-2:target~.slide_container {
  left: -100%;
}

#slide-3:target~.slide_container {
  left: -200%;
}

#slide-4:target~.slide_container {
  left: -300%;
}

@keyframes slidy {
  0% {
    left: 0%;
  }
  21% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  46% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  71% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  96% {
    left: -300%;
  }
  100% {
    left: 0%;
  }
}

<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <span id="slide-4"></span>

  <figure class="slide_container">
    <div class="slide">
      <p>Test1</p>
      <img src="https://via.placeholder.com/300?text=1" class="slider_image">
    </div>

    <div class="slide">
      <p>Test2</p>
      <img src="https://via.placeholder.com/300?text=2" class="slider_image">
    </div>

    <div class="slide">
      <p>Test3</p>
      <img src="https://via.placeholder.com/300?text=3" class="slider_image">
    </div>

    <div class="slide">
      <p>Test4</p>
      <img src="https://via.placeholder.com/300?text=4" class="slider_image">
    </div>

  </figure>

  <div class="button_container">
    <a href="#slide-1" class="slider_button"></a>
    <a href="#slide-2" class="slider_button"></a>
    <a href="#slide-3" class="slider_button"></a>
    <a href="#slide-4" class="slider_button"></a>
  </div>


</div>

Answer 1

在想法上，是定义相同的动画 4 次，然后在单击时激活所需的动画并延迟显示目标图像，然后 slider 将继续自动运行。但是在更改图像时不会有过渡。不确定您的配置是否可行。

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: left 2s;
  animation: 10s slidy infinite;
}

.slider figure .slide {
  width: 25%;
  float: left;
}

.slider figure img {
  width: 100%;
  height: 300px;
}

.button_container {
  position: relative;
  top: -30px;
  text-align: center;
}

.slider_button {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0px 15px;
}

#slide-1:target~.slide_container {
  animation: 10s slidy1 infinite;
}

#slide-2:target~.slide_container {
  animation: 10s slidy2 infinite -2.5s;
}

#slide-3:target~.slide_container {
  animation: 10s slidy3 infinite -5s;
}

#slide-4:target~.slide_container {
  animation: 10s slidy4 infinite -7.5s;
}

@keyframes slidy {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy1 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy2 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy3 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy4 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}

<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <span id="slide-4"></span>

  <figure class="slide_container">
    <div class="slide">
      <p>Test1</p>
      <img src="https://via.placeholder.com/300?text=1" class="slider_image">
    </div>

    <div class="slide">
      <p>Test2</p>
      <img src="https://via.placeholder.com/300?text=2" class="slider_image">
    </div>

    <div class="slide">
      <p>Test3</p>
      <img src="https://via.placeholder.com/300?text=3" class="slider_image">
    </div>

    <div class="slide">
      <p>Test4</p>
      <img src="https://via.placeholder.com/300?text=4" class="slider_image">
    </div>

  </figure>

  <div class="button_container">
    <a href="#slide-1" class="slider_button"></a>
    <a href="#slide-2" class="slider_button"></a>
    <a href="#slide-3" class="slider_button"></a>
    <a href="#slide-4" class="slider_button"></a>
  </div>


</div>