如何修复 CSS 轮播？

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

我个人发现了一个显示完全流畅且响应迅速的 CSS 旋转木马的网站，并且它共享了它的代码。看看这个： 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; }

}

Answer 2

在 left css 属性上不要超过 -200%。我使用 15 秒和更少的关键帧创建了一个类似的版本。动画与您的动画不同，但它会向您展示使用 -200% 足以用于三个滑块。如果添加更多滑块，则需要添加更多 %.

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

Answer 3

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; }
}

  <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>

将您现有的关键帧替换为：

@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%，所以我们只想像这样调整关键帧。让我知道这是否有效，如果有任何不清楚的地方:)

如何修复 CSS 轮播？

How to fix CSS carousel?

html

css

animation

carousel