css 滑块仅显示前 3 个图像

Question

我找到了一个漂亮而简单的自动 css 滑块 (http://dreyacosta.github.io/pure-responsive-css3-slider/)，但问题是它只一张一张地显示前 3 张图像，然后重复显示它们。无论我在列表中放入多少图像，如何让它滑动所有图像？每张图片都是 300 像素 x 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
}

您需要拆分成更小的增量，以便为幻灯片 4 添加 -300%，为幻灯片 5 添加 -400% 等。

css 滑块仅显示前 3 个图像

css slider shows only first 3 images

html

css

image

slider