Pure CSS Slider Анимация

Question

Мне нужна помощь Я хочу сделать слайд-шоу, где вы можете добавить столько фотографий, сколько хотите. Но проблема в том, что моя анимация слайдера не может обрабатывать более трех картин без плохого.

Вот мой код http://codepen.io/anon/pen/emxoXj

.slides { 
 
    width: 600px; 
 
    height: 300px; 
 
    margin: 0px auto; 
 
    overflow: hidden; 
 
    border-radius: 10px; 
 
} 
 
.slidesContainer { 
 
    width: 2400px; 
 
    -webkit-animation: slide 8s ease infinite; 
 
} 
 
.slides .slide { 
 
    width: 600px; 
 
    height: 300px; 
 
    float: left; 
 
} 
 
.slides div:nth-of-type(1) { 
 
    background: #ff8330; 
 
} 
 
.slides div:nth-of-type(2) { 
 
    background: #30ff83; 
 
} 
 
.slides div:nth-of-type(3) { 
 
    background: #3083ff; 
 
} 
 
.slides div:nth-of-type(4) { 
 
    background: #3083ff; 
 
} 
 
@-webkit-keyframes slide { 
 
    15% { 
 
    margin-left: 0px; 
 
    } 
 
    30% { 
 
    margin-left: 0px; 
 
    } 
 
    45% { 
 
    margin-left: -600px; 
 
    } 
 
    60% { 
 
    margin-left: -600px; 
 
    } 
 
    75% { 
 
    margin-left: -1200px; 
 
    } 
 
    90% { 
 
    margin-left: -1200px; 
 
    } 
 
    105% { 
 
    margin-left: -1800px; 
 
    } 
 
    120% { 
 
    margin-left: -1800px; 
 
    } 
 
    135% { 
 
    margin-left: 0px; 
 
    } 
 
}

<div class="slides"> 
 
    <div class="slidesContainer"> 
 
    <div class="slide"></div> 
 
    <div class="slide"></div> 
 
    <div class="slide"></div> 
 
    </div> 
 
</div>

Это проблема, но я не знаю другого решения, которое отлично работает для меня.

@-webkit-keyframes slide { 
    15% {margin-left: 0px;} 
    30% {margin-left: 0px;} 
    45% {margin-left: -600px;} 
    60% {margin-left: -600px;} 
    75% {margin-left: -1200px;} 
    90% {margin-left: -1200px;} 
    105% {margin-left: -1800px;} 
    120% {margin-left: -1800px;} 
    135% {margin-left: 0px;} 
} 

Answer 1

Попробуйте это, вы можете добавить столько слайдов, как вы хотите просто добавить задержку для каждого изображения здесь, как:

---

, если у вас 5 изображений CSS будет (5x4 = задержка 20s)

img:nth-child(5){-webkit-animation-delay:20s;} 

---

если и есть 6 изображений CSS будет (6х4 = задержка 24s)

img:nth-child(6){-webkit-animation-delay:24s;} 

---

body{background:#eee;} 
 

 
.slider{ 
 
    margin:10px auto; 
 
    width:500px; 
 
    height:320px; 
 
    overflow:hidden; 
 
    position:relative; 
 

 
} 
 
.photo{ 
 
    position:absolute; 
 
    -webkit-animation:round 16s infinite; 
 
    opacity:0; 
 
    width:100%; 
 
    
 
} 
 
@-webkit-keyframes round{ 
 
    25%{opacity:1;} 
 
    40%{opacity:0;} 
 
} 
 

 
img:nth-child(4){-webkit-animation-delay:0s;} 
 
img:nth-child(3){-webkit-animation-delay:4s;} 
 
img:nth-child(2){-webkit-animation-delay:8s;} 
 
img:nth-child(1){-webkit-animation-delay:12s;}

<div class="slider"> 
 
    <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" /> 
 
    <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" /> 
 
    <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" /> 
 
    <img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" /> 
 
</div>