Image slider - loop not working - html

Question

I would like to use this image slider: http://codepen.io/rslglover/pen/DBvoA
The image slider works well, but when its finish, it stops. I can't see whats the difference is from the CodePen codes, and what I've done. How can it be it works in the CodePen link?
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
article:nth-of-type(1){
animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
animation: slideIn 50s linear 45s infinite;
}
#keyframes slideIn{
0% {left: 450px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -450px;}
100%{left: -450px;}
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
And my html
<div class="galleryInfo">
<div class="gallery">
<article><img class="galleryImg" src="images/aa2.png" alt=""></article>
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb2.png" alt=""></article>
</div>
</div>

Answer 1

Check this out:
HTML:
<div class="galleryInfo">
<div class="gallery">
<section>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
</div>
</div>
CSS:
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -200px;}
100%{left: -200px;}
}
Or change position in css file clas galleryInfo and gallery above animation.

Answer 2

The primary reason why your animation appears to stop, is because the CSS is structured for 10 slides.
To maintain the same duration and animation, the keyframes percentages need to be configured for the new total number of slides you are using.
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
By changing the keyframes, you will maintain the same slide speed as your codepen example had.
Here is a working snippet.
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 200px;
background: #292929;
color: #e3e3e3;
width: 200px;
height: 200px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 80px;
}
/*
* As each slide's animation is 5s, the set duration is totalSlides * 5.
*/
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
<section>
<article>Slide 1</article>
<article>Slide 2</article>
<article>Slide 3</article>
<article>Slide 4</article>
</section>