Как я могу рассчитать проценты в чистом ползунке CSS3 для 10 слайдов

Question

У меня есть проект, в котором чистый ползунок css3 работает с 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>