如何覆盖 CSS 滑块动画——带有 NAV 的纯 CSS 滑块？答案

【问题标题】：How to override CSS slider animation -- pure CSS slider with NAV?如何覆盖 CSS 滑块动画——带有 NAV 的纯 CSS 滑块？
【发布时间】：2019-12-25 08:53:48
【问题描述】：

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

.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>

【问题讨论】：

标签： html css slider css-animations

【解决方案1】：

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

.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>

【讨论】：

这是一个不错的方法。但是这个有问题。例如，如果您导航到任何滑块，它将导航到正确的幻灯片。但是在下一次转换之后，除非您转到其他幻灯片，否则您无法导航到同一张幻灯片。

【解决方案2】：

@TemaniAfif 打败了我！
我仍然做了一些工作以使其正常工作，所以这里是具有 5 个关键帧的工作 sn-p（默认为 1 个，每张幻灯片为 1 个，重新组织变换以制作这行得通）。虽然正如 Termani 所说，切换动画时没有过渡）：

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

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: transform 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;
}

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

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

@keyframes slidy {
  0% {
    transform: translateX(0);
  }
  21% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-25%);
  }
  46% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  71% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-75%);
  }
  96% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slidy1 {
  0% {
    transform: translateX(0);
  }
  21% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-25%);
  }
  46% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  71% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-75%);
  }
  96% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slidy2 {
  0% {
    transform: translateX(-25%);
  }
  21% {
    transform: translateX(-25%);
  }
  25% {
    transform: translateX(-50%);
  }
  46% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(-75%);
  }
  71% {
    transform: translateX(-75%);
  }
  75% {
    transform: translateX(0);
  }
  96% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}

@keyframes slidy3 {
  0% {
    transform: translateX(-50%);
  }
  21% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(-75%);
  }
  46% {
    transform: translateX(-75%);
  }
  50% {
    transform: translateX(-0%);
  }
  71% {
    transform: translateX(-0%);
  }
  75% {
    transform: translateX(-25%);
  }
  96% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slidy4 {
  0% {
    transform: translateX(-75%);
  }
  21% {
    transform: translateX(-75%);
  }
  25% {
    transform: translateX(0);
  }
  46% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  71% {
    transform: translateX(-25%);
  }
  75% {
    transform: translateX(-50%);
  }
  96% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-75%);
  }
}

<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>

这也不是完美的，例如，当您单击“1”按钮并重新启动动画（2、3、4..）时，如果您再次单击“1”.. 没有任何反应（因为它没有'不切换动画）。

【讨论】：

点击幻灯片 2 并等待它动画到下一张幻灯片。再次点击看看会发生什么
是的，我在你评论的同时编辑了我的帖子；）