Hej, kiedy dodaję tu więcej zdjęć niż 4 poprzez dopisanie ich analogiczne w html oraz tutaj np.
li:nth-child(11)
{
animation: xfade 16s 0s infinite;
}
a z kolei w:
li:nth-child(1)
{
animation: xfade 16s 12s infinite;
}
dodaję analogicznie więcej sekund (co 4 z każdym obrazkem) to ciągle wyświetlają mi się 4 obrazki, z jednym zmienionym i tyle.
Jak je dodać, aby działały?
Niżej kody ze sliderem
index.html
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title></title>
<link rel="stylesheet" href="style2.css" type="text/css" />
</head>
<body>
<ul>
<li><img src="http://placekitten.com/320"></li>
<li><img src="http://placekitten.com/g/320"></li>
<li><img src="http://placekitten.com/340"></li>
<li><img src="http://placekitten.com/g/340"></li>
</ul>
</body>
</html>
css
body {
background: #111;
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
width:20%;
margin-top:5%;
/* position: relative;*/
}
li {
position: absolute;
/* left: 50%;
/* margin-left: -247px;*/
/* margin-top: 5%;*/
}
li:nth-child(4) {
animation: xfade 16s 0s infinite;
}
li:nth-child(3) {
animation: xfade 16s 4s infinite;
}
li:nth-child(2) {
animation: xfade 16s 8s infinite;
}
li:nth-child(1) {
animation: xfade 16s 12s infinite;
}
@keyframes xfade{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}