Slider z <ul>, jak wstawić więcej zdjęć

pytanie zadane 23 maja 2017 w HTML i CSS przez sonewbie Użytkownik (690 p.)

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;
  }
}