More than 4 slides?

[tarawhiteley]

Hi! Great slider! How can I include more than 4 slides? I have put added more in my html, but it only shows 4.
Thank you!

[a72un]

for including 5 images

.slides{
  width:500%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}
.slider{
  width:20%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}
/* Animation */
@-webkit-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  15%{
    margin-left:0%;
  }
  20%{
    margin-left:-100%;
  }
  35%{
    margin-left:-100%;
  }
  40%{
    margin-left:-200%;
  }
  55%{
    margin-left:-200%;
  }
  60%{
    margin-left:-300%;
  }
  75%{
    margin-left:-300%;
  }
  80%{
    margin-left:-300%;
  }
  85%{
    margin-left:-400%;
  }
  96%{
    margin-left:-400%;
  }
}
@-moz-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  15%{
    margin-left:0%;
  }
  20%{
    margin-left:-100%;
  }
  35%{
    margin-left:-100%;
  }
  40%{
    margin-left:-200%;
  }
  55%{
    margin-left:-200%;
  }
  60%{
    margin-left:-300%;
  }
  75%{
    margin-left:-300%;
  }
  80%{
    margin-left:-300%;
  }
  85%{
    margin-left:-400%;
  }
  96%{
    margin-left:-400%;
  }
}
@keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  15%{
    margin-left:0%;
  }
  20%{
    margin-left:-100%;
  }
  35%{
    margin-left:-100%;
  }
  40%{
    margin-left:-200%;
  }
  55%{
    margin-left:-200%;
  }
  60%{
    margin-left:-300%;
  }
  75%{
    margin-left:-300%;
  }
  80%{
    margin-left:-300%;
  }
  85%{
    margin-left:-400%;
  }
  96%{
    margin-left:-400%;
  }
}```

[robguay]

Hello! LOVE your creation, however, I need some help with the math when added additional slides using the slider-btt.css. Reviewing your help from above here is the code I changed to add a fifth slide.

`.slides{
width:100%;
height:500%;
position:relative;
-webkit-animation:slide 12s infinite;
-moz-animation:slide 12s infinite;
animation:slide 12s infinite;
}
.slider{
width:100%;
height:20%;
position:relative;
z-index:1;
overflow:hidden;
}

/* Animation */
@-webkit-keyframes slide{
0%,121%{
margin-top:0%;
}
21%{
margin-top:0%;
}
25%{
margin-top:-500px;
}
46%{
margin-top:-500px;
}
50%{
margin-top:-1000px;
}
71%{
margin-top:-1000px;
}
75%{
margin-top:-1500px;
}
96%{
margin-top:-1500px;
}
100%{
margin-top:-2000px;
}
121%{
margin-top:-2500px;
}
}
@-moz-keyframes slide{
0%,121%{
margin-top:0%;
}
21%{
margin-top:0%;
}
25%{
margin-top:-500px;
}
46%{
margin-top:-500px;
}
50%{
margin-top:-1000px;
}
71%{
margin-top:-1000px;
}
75%{
margin-top:-1500px;
}
96%{
margin-top:-1500px;
}
100%{
margin-top:-2000px;
}
121%{
margin-top:-2500px;
}
}
@Keyframes slide{
0%,121%{
margin-top:0%;
}
21%{
margin-top:0%;
}
25%{
margin-top:-500px;
}
46%{
margin-top:-500px;
}
50%{
margin-top:-1000px;
}
71%{
margin-top:-1000px;
}
75%{
margin-top:-1500px;
}
96%{
margin-top:-1500px;
}
100%{
margin-top:-2000px;
}
121%{
margin-top:-2500px;
}
}
`
Issue I am having is that it gets to the last image and it pops to the first one again without a pause.
I think I have the math incorrect with regards to the percentages. 'slides' and 'slider' class.
How to I calculate my increments?
Your help would be GREATLY appreciated!