Question

我找到了一个不错的简单的自动css滑块（http://dreyacosta.github.io/pure-responsive-css3-slider/），但问题是它只一个一个地显示前三个图像，然后重复它们。无论列表中放了多少，如何使它滑动所有图像？每张图片的尺寸为300px x 225px，而且无论屏幕大小如何，我都希望保持其宽高比。

.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

这不是一个很好的滑块，但是通过left设置了3张图片限制：

@-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张图像

1 个答案: