如何修復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

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

我們從來沒有想要去更左比-200％ 3張幻燈片，所以我們只是想調整這樣的關鍵幀。讓我知道如果這個工程，如果有什麼不清楚:)

Answer 2

個人而言，我發現呈現出完全流暢性和響應CSS旋轉木馬網站，並分享它的代碼。 看看這個： Fluid Carousel

有使用這個人的關鍵幀中的差異和u使用，ü可以看看這個：

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

不要超過-200 ％left css屬性。我使用15個或更少的關鍵幀創建了一個類似的版本。動畫與您的動畫不一樣，但它會告訴您使用-200％就足夠用於三個滑塊。如果添加更多滑塊，則需要添加更多％。

這裏是鏈接： https://jsfiddle.net/Treeindev/75Lg9su2/10/