Question

我正在尝试制作带有三张幻灯片的CSS旋转木马，我遇到了一个问题。在最后一次迭代中，轮播转移到空白页面。我怎样才能解决这个问题？我怀疑它与关键帧有关。

HTML

<div class="carousel">
   <ul class="panes">
      <li>
         <div class='text'>First</div>
      </li>
      <li>
         <div class='text'>Second</div>
      </li>
      <li>
         <div class='text'>Third</div>
      </li>
   </ul>
</div>

CSS

body, div, ul, li {
  margin: 0;
  padding-left: 0px;
}

.carousel {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

.panes {
    list-style: none;
    position: relative;
    width: 300%;
    animation: carousel 30s infinite;
}

.panes > li {
  position: relative;
  float: left;
  width: 33.3333%;
}

.carousel .text {
  display: block;
  width: 100%;
  max-width: 100%;
}

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

JSFiddle Sandbox

Answer 1

left css属性不要超过-200％。我使用15s和更少的关键帧创建了一个类似的版本。动画与你的动画不一样，但它会告诉你使用-200％就足够三个滑块了。如果添加更多滑块，则需要添加更多％。

这是链接： https://jsfiddle.net/Treeindev/75Lg9su2/10/

Answer 2

＆＃13;

body, div, ul, li {
  margin: 0;
  padding-left: 0px;
}

.carousel {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
.panes {
    list-style: none;
    position: relative;
    width: 300%;
    animation: carousel 30s infinite;
}
.panes > li {
  position: relative;
  float: left;
  width: 33.3333%;
}

.carousel .text {
  display: block;
  width: 100%;
  max-width: 100%;
}

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    22% { left:-100%; }
    33%   { left:-100%; }
    44% { left:-200%; }
    55%   { left:-200%; }
    66%   { left:-100%; }
    77% { left:-100%; }
    88% { left:0; }
    99%  { left:0; }
}

＆＃13;

  <div class="carousel">
    <ul class="panes">
      <li>
        <div class='text'>First</div>
      </li>
      <li>
        <div class='text'>Second</div>
      </li>
      <li>
        <div class='text'>Third</div>
      </li>
    </ul>
  </div>

＆＃13;

用以下内容替换现有的关键帧：

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    22% { left:-100%; }
    33%   { left:-100%; }
    44% { left:-200%; }
    55%   { left:-200%; }
    66%   { left:-100%; }
    77% { left:-100%; }
    88% { left:0; }
    99% { left:0; }
}

我们绝不想在3张幻灯片上留下超过-200％，所以我们只想调整这样的关键帧。让我知道这是否有效，如果有什么不清楚：）

Answer 3

就个人而言，我发现一个网站显示了一个完全流畅且响应迅速的CSS Carousel并且它共享了它的代码。看看这个： Fluid Carousel

这个人使用过的关键帧和你使用的关键帧有所不同，你可以看看这个：

@keyframes carousel{
0%    { left:0; }
11%   { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25%   { left:-200%; }
36%   { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50%   { left:-400%; }
61%   { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75%   { left:-200%; }
86%   { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100%  { left:0; }

}

如何修复CSS轮播？

3 个答案: