Как исправить 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 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; } 

}

Answer 3

Не превышать -200 % от свойства left. Я создал аналогичную версию, используя 15 и менее ключевых кадров. Анимация не такая же, как у вас, но она покажет вам, что использовать -200% достаточно для трех слайдеров. Если вы добавите больше слайдеров, вам нужно будет добавить больше%.

Вот ссылка: https://jsfiddle.net/Treeindev/75Lg9su2/10/