Add slide image with css - html

Question

How to add 1 more image and animation for this slider. please help me to change value property #-moz-keyframes{} or #-webkit-keyframes{}. thanks.
there my slider https://jsfiddle.net/JonoRecher/zt3d2duj/
/* MY CSS*/
#wrapper4 {
border-top: 7px solid #bdbdbd;
border-bottom: 7px solid #bdbdbd;
padding-top: 40px;
padding-bottom: 40px;
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/congruent_outline.png);
}
#slider4 {
background: #000;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 320px;
width: 680px;
margin: 0 auto 0;
overflow: visible;
position: relative;
}
#mask {
overflow: hidden;
height: 320px;
}
#slider4 ul {
margin: 0;
padding: 0;
position: relative;
}
#slider4 li {
width: 640px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
#slider4 li.animation1 {
animation: cycle 25s linear infinite;
}
#slider4 li.animation2 {
animation: cycle2 25s linear infinite;
}
#slider4 li.animation3 {
animation: cycle3 25s linear infinite;
}
#slider4 li.animation4 {
animation: cycle4 25s linear infinite;
}
#slider4 li.animation5 {
animation: cycle5 25s linear infinite;
}
#keyframes cycle {
0% {top: 0px;}
4% {top: 0px;}
16% {top: 0px;opacity: 1;z-index: 0;}
20% {top: 325px;opacity: 0;z-index: 0;}
21% {top: -325px;opacity: 0;z-index: -1;}
92% {top: -325px;opacity: 0;z-index: 0;}
96% { top: -325px;opacity: 0;}
100% {top: 0px;opacity: 1;}
}
#keyframes cycle2 {
0% {top: -325px;opacity: 0;}
16% {top: -325px;opacity: 0;}
20% {top: 0px;opacity: 1;}
24% {top: 0px; opacity: 1;}
36% {top: 0px; opacity: 1;z-index: 0;}
40% {top: 325px;opacity: 0;z-index: 0;}
41% {top: -325px;opacity: 0;z-index: -1;}
100% {top: -325px;opacity: 0;z-index: -1;}
}
#keyframes cycle3 {
0% {top: -325px;opacity: 0;}
36% {top: -325px;opacity: 0;}
40% {top: 0px;opacity: 1;}
44% {top: 0px;opacity: 1;}
56% {top: 0px;opacity: 1;}
60% {top: 325px; opacity: 0;z-index: 0;}
61% {top: -325px;opacity: 0;z-index: -1;}
100% {top: -325px;opacity: 0; z-index: -1;}
}
#keyframes cycle4 {
0% {top: -325px;opacity: 0;}
56% {top: -325px;opacity: 0;}
60% {top: 0px;opacity: 1;}
64% {top: 0px;opacity: 1;}
76% {top: 0px;opacity: 1;z-index: 0;}
80% {top: 325px;opacity: 0;z-index: 0;}
81% {top: -325px;opacity: 0;z-index: -1;}
100% {top: -325px;opacity: 0;z-index: -1;}
}
#keyframes cycle5 {
0% {top: -325px;opacity: 0;}
76% {top: -325px;opacity: 0;}
80% {top: 0px;opacity: 1;}
84% {top: 0px;opacity: 1;}
96% {top: 0px;opacity: 1;z-index: 0;}
100% {top: 325px;opacity: 0;z-index: 0;}
}
.progress-bar {
position: relative;
top: -5px;
width: 680px;
height: 5px;
background: #000;
animation: fullexpand 25s ease-out infinite;
}
#keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% {width: 0%;opacity: 0;}
4%,24%,44%,64%,84% {width: 0%;opacity: 0.3;}
16%,36%,56%,76%,96% {width: 100%;opacity: 0.7;}
17%,77%,97% {width: 100%;opacity: 0.3;}
18%,38%,58%,78%,{opacity: 0;}
}
#slider4 .tooltip {
background: rgba(0, 0, 0, 0.7);
width: 300px;
height: 60px;
position: relative;
bottom: 75px;
left: -320px;
transition: all 0.3s ease-in-out;
}
#slider4 .tooltip h1 {
color: #fff;
font-size: 24px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 10px;
}
#slider4 li#list1:hover .tooltip,
#slider4 li#list2:hover .tooltip,
#slider4 li#list3:hover .tooltip,
#slider4 li#list4:hover .tooltip,
#slider4 li#list5:hover .tooltip {
left: 0px;
}
#slider4:hover li,
#slider4:hover .progress-bar {
animation-play-state: paused;
}
<div id="wrapper4">
<div id="content-slider">
<div id="slider4">
<div id="mask">
<ul>
<li id="list1" class="animation1">
<img src="http://js.seocn.info/up_pic/js/201312/1533/images/img_1.jpg" alt="Couqar">
<div class="tooltip">
<h1>Couqar</h1>
</div>
</li>
<li id="list2" class="animation2">
<img src="http://js.seocn.info/up_pic/js/201312/1533/images/img_2.jpg" alt="Lions">
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="list3" class="animation3">
<img src="http://js.seocn.info/up_pic/js/201312/1533/images/img_3.jpg" alt="Snowalker">
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="list4" class="animation4">
<img src="http://js.seocn.info/up_pic/js/201312/1533/images/img_4.jpg" alt="Howling">
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="list5" class="animation5">
<img src="http://js.seocn.info/up_pic/js/201312/1533/images/img_5.jpg" alt="Sunbathing">
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>

Answer 1

1. Update your html
Firstly, add a sixth li tag for your new image after the last li tag in your html as follows:
<!-- Provide a new value for 'id' and 'class' attributes and set the values as shown below -->
<li id="list6" class="animation6">
<!--
1. Add the path to your new image in the 'src' attribute of the `img` tag below.
2. Describe your new image in the 'alt' attribute of the `img` tag below.
3. Update the text in the `h1` tag below as required.
-->
<img src="/the/path/to/new/image" alt="Description goes here">
<div class="tooltip">
<h1>some new text goes here</h1>
</div>
</li>
2. Update your CSS
All of the animation keyframes should be updated to handle the 6th image.
Full example:
The complete revised code can be found here here.
NOTE: You just need to add the path to your new image in the img tags 'src' attribute (line 44 of the html):