css - 我如何计算 10 张幻灯片的纯 css3 slider 的百分比

Question

我有一个元素，其中一个纯 css3 slider 正在处理 5 个图像，关键帧计算如下面的 css 脚本中所述。我想将其增加到 10 张图像并尝试使用关键帧但无法使其正常工作。在这方面的任何帮助将不胜感激。

html:

 <div id="captioned-gallery">
     <figure class="slider">
          <figure> <img src="./files/auto1.jpg" alt=""> </figure>
          <figure> <img src="./files/auto8.jpg" alt=""> </figure>
          <figure> <img src="./files/auto3.jpg" alt=""> </figure>
          <figure> <img src="./files/auto4.jpg" alt=""> </figure>
          <figure> <img src="./files/auto5.jpg" alt=""> </figure>
          <figure> <img src="./files/auto1.jpg" alt=""> </figure>
     </figure>
</div>

CSS:

figure.slider {
     position: relative;
     width: 1000%;
     font-size: 0;
     animation: 30s slidy infinite;
}
 figure.slider figure {
     width: 10%;
     height: auto;
     display: inline-block;
     position: inherit;
}
 figure.slider img {
     width: 80%;
     height: auto;
}
 figure.slider figure figcaption {
     position: absolute;
     bottom: 0;
     background: rgba(0,0,0,0.4);
     color: #fff;
     width: 100%;
     font-size: 2rem;
     padding: .6rem;
}

CSS3 关键帧:

@keyframes slidy {
    0% { left: 0%; }
    10% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

Answer 1

我不知道您的图片大小，但下面是一个使用 150 像素宽图片的示例。希望这会有所帮助。

body {
  padding: 0;
  margin: 0;
}

figure.slider {
  position: relative;
  width: 1500px;
  font-size: 0;
  display: flex;
  animation: 30s slidy infinite;
  margin: 0;
}

figure.slider figure {
  width: 150px;
  display: inline-block;
  position: inherit;
  margin: 0;
  padding: 0;
}

@keyframes slidy {
  0% {
    left: 0;
  }
  10% {
    left: -150px;
  }
  20% {
    left: -300px;
  }
  30% {
    left: -450px;
  }
  40% {
    left: -600px;
  }
  50% {
    left: -750px;
  }
  60% {
    left: -900px;
  }
  70% {
    left: -1050px;
  }
  80% {
    left: -1200px;
  }
  90% {
    left: -1350px;
  }
  100% {
    left: -1500px;
  }
}

<div id="captioned-gallery">
  <figure class="slider">
    <figure> <img src="http://via.placeholder.com/150x50/0000ff" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/00ff00" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/ff0000" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/00ffff" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/ffff00" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/ff00ff" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/0000ff" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/00ff00" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/ff0000" alt=""> </figure>
    <figure> <img src="http://via.placeholder.com/150x50/00ffff" alt=""> </figure>
  </figure>
</div>