Слайдер css показывает только первые 3 изображения

Question

Я нашел красивый и простой автомат c css бегунок (http://dreyacosta.github.io/pure-responsive-css3-slider/), но проблема в том, что он показывает только первые 3 изображения одно за другим, а затем повторяет их. Как я могу сделать так, чтобы все слайды скользили независимо от того, сколько я поместил в список? Каждое изображение имеет размер 300 на 225 пикселей, и я также хочу сохранить его соотношение сторон независимо от размера экрана.

.card-img-top {
height:auto;
width:100%;
display:block;
border-top-left-radius:calc(.25rem - 1px);
border-top-right-radius:calc(.25rem - 1px)
}

.slider {
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  max-width: 100%;
}

.slider ol {
  width: 1000%;
  height: auto;
  position: relative;
  display:block;
  list-style: none;
  left: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  -moz-animation:slide-animation 10s infinite;
  -webkit-animation:slide-animation 10s infinite;
}

.slider ol:hover {
  -moz-animation-play-state:paused;
  -webkit-animation-play-state:paused;
}

.slider li {
  width: 10%;  
  height: auto;
  list-style: none;
  float: left;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes slide-animation {
  1% {left: 0%; opacity: 1;}
  18% {left: 0%; opacity: 1}
  19% {opacity: 0.2;}
  20% {left: -100%; opacity: 1;}
  58% {left: -100%; opacity: 1;}
  59% {opacity: 0.2;}
  60% {left: -200%; opacity: 1;}
  98% {left: -200%; opacity: 1;}
  99% {opacity: 0.5;}
  100% {left: 0%;}
}

@-moz-keyframes slide-animation {
  1% {left: 0%; opacity: 1;}
  18% {left: 0%; opacity: 1}
  19% {opacity: 0.2;}
  20% {left: -100%; opacity: 1;}
  58% {left: -100%; opacity: 1;}
  59% {opacity: 0.2;}
  60% {left: -200%; opacity: 1;}
  98% {left: -200%; opacity: 1;}
  99% {opacity: 0.5;}
  100% {left: 0%;}
}

<!-- Slideshow box -->
 <div class="slider">
<ol>
<li><img src="http://www.maggitekstils.lv/img/pillowcases.jpg" class="card-img-top"></li>
<li><img src="http://www.maggitekstils.lv/img/pillowcases-curly-light.jpg" class="card-img-top"></li>
<li><img src="http://www.maggitekstils.lv/img/pillowcases-circles-pink.jpg" class="card-img-top"></li>
<li><img src="http://www.maggitekstils.lv/img/pillowcases-khaki.jpg" class="card-img-top"></li>
<li><img src="http://www.maggitekstils.lv/img/pillowcases-circles-blue.jpg" class="card-img-top"></li>
<li><img src="http://www.maggitekstils.lv/img/pillowcases-pink-violet.jpg" class="card-img-top"></li>
<li><img src="http://www.maggitekstils.lv/img/pillowcases-red-poppy.jpg" class="card-img-top"></li>
<li><img src="http://www.maggitekstils.lv/img/pillowcases-cacao.jpg" class="card-img-top"></li>
</ol>
</div>
<!--end-->

Answer 1

Это не очень хороший слайдер, но предел 3 изображения устанавливается через left:

@-webkit-keyframes slide-animation {
  1% {left: 0%; opacity: 1;} // Slideshow is 0% to the left
  18% {left: 0%; opacity: 1}
  19% {opacity: 0.2;}
  20% {left: -100%; opacity: 1;} // Slideshow is 100% to the left, so showing slide 2
  58% {left: -100%; opacity: 1;}
  59% {opacity: 0.2;}
  60% {left: -200%; opacity: 1;} // Slideshow is 200% to the left, showing slide 3
  98% {left: -200%; opacity: 1;}
  99% {opacity: 0.5;}
  100% {left: 0%;} // Slideshow is 0% to the left - back to start
}

Вам нужно разделить на меньшие приращения, чтобы добавить -300% для слайда 4, - 400% для слайда 5 et c.