CSS Only SlideShow with dynamic＃images

Question

我在我正在创建的页面上使用CSS Only SlideShow。幻灯片是动态添加的，这会导致正确显示幻灯片的问题。下面是我正在使用的CSS和HTML。

我希望代码可以处理最多20张图像，每张图像之间的时间间隔为4秒。我面临的问题是，动态添加时，图像不按顺序播放，这是我所期待的。

有没有人知道为什么这段代码不能正常工作？幻灯片播放完美播放，只显示关闭的图像顺序。我还要补充说，同一页面上有多个幻灯片放映。我不确定这是否会导致这个问题。

我注意到，当跳过图像时，在实际转换过程中图像之间会出现闪光。

.slider {
  margin: 10px auto;
  width: 500px;
  height: 320px;
  overflow: hidden;
  position: relative;
}
.photo {
  position: absolute;
  -webkit-animation: round 16s infinite;
  opacity: 0;
  width: 100%;
}
@-webkit-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
.slider img:nth-child(20) {
	-webkit-animation-delay: 76s;
	-moz-animation-delay: 76s;
	-ms-animation-delay: 76s;
	-o-animation-delay: 76s;
	animation-delay: 76s;
}

.slider img:nth-child(19) {
	-webkit-animation-delay: 72s;
	-moz-animation-delay: 72s;
	-ms-animation-delay: 72s;
	-o-animation-delay: 72s;
	animation-delay: 72s;
}

.slider img:nth-child(18) {
	-webkit-animation-delay: 68s;
	-moz-animation-delay: 68s;
	-ms-animation-delay: 68s;
	-o-animation-delay: 68s;
	animation-delay: 68s;
}

.slider img:nth-child(17) {
	-webkit-animation-delay: 64s;
	-moz-animation-delay: 64s;
	-ms-animation-delay: 64s;
	-o-animation-delay: 64s;
	animation-delay: 64s;
}

.slider img:nth-child(16) {
	-webkit-animation-delay: 60s;
	-moz-animation-delay: 60s;
	-ms-animation-delay: 60s;
	-o-animation-delay: 60s;
	animation-delay: 60s;
}

.slider img:nth-child(15) {
	-webkit-animation-delay: 56s;
	-moz-animation-delay: 56s;
	-ms-animation-delay: 56s;
	-o-animation-delay: 56s;
	animation-delay: 56s;
}

.slider img:nth-child(14) {
	-webkit-animation-delay: 52s;
	-moz-animation-delay: 52s;
	-ms-animation-delay: 52s;
	-o-animation-delay: 52s;
	animation-delay: 52s;
}

.slider img:nth-child(13) {
	-webkit-animation-delay: 48s;
	-moz-animation-delay: 48s;
	-ms-animation-delay: 48s;
	-o-animation-delay: 48s;
	animation-delay: 48s;
}

.slider img:nth-child(12) {
	-webkit-animation-delay: 44s;
	-moz-animation-delay: 44s;
	-ms-animation-delay: 44s;
	-o-animation-delay: 44s;
	animation-delay: 44s;
}

.slider img:nth-child(11) {
	-webkit-animation-delay: 40s;
	-moz-animation-delay: 40s;
	-ms-animation-delay: 40s;
	-o-animation-delay: 40s;
	animation-delay: 40s;
}

slider img:nth-child(10) {
	-webkit-animation-delay: 36s;
	-moz-animation-delay: 36s;
	-ms-animation-delay: 36s;
	-o-animation-delay: 36s;
	animation-delay: 36s;
}

.slider img:nth-child(9) {
	-webkit-animation-delay: 32s;
	-moz-animation-delay: 32s;
	-ms-animation-delay: 32s;
	-o-animation-delay: 32s;
	animation-delay: 32s;
}

.slider img:nth-child(8) {
	-webkit-animation-delay: 28s;
	-moz-animation-delay: 28s;
	-ms-animation-delay: 28s;
	-o-animation-delay: 28s;
	animation-delay: 28s;
}

.slider img:nth-child(7) {
	-webkit-animation-delay: 24s;
	-moz-animation-delay: 24s;
	-ms-animation-delay: 24s;
	-o-animation-delay: 24s;
	animation-delay: 24s;
}

.slider img:nth-child(6) {
	-webkit-animation-delay: 20s;
	-moz-animation-delay: 20s;
	-ms-animation-delay: 20s;
	-o-animation-delay: 20s;
	animation-delay: 20s;
}

.slider img:nth-child(5) {
	-webkit-animation-delay: 16s;
	-moz-animation-delay: 16s;
	-ms-animation-delay: 16s;
	-o-animation-delay: 16s;
	animation-delay: 16s;
}

.slider img:nth-child(4) {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-ms-animation-delay: 12s;
	-o-animation-delay: 12s;
	animation-delay: 12s;
}

.slider img:nth-child(3) {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-ms-animation-delay: 8s;
	-o-animation-delay: 8s;
	animation-delay: 8s;
}

.slider img:nth-child(2) {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-ms-animation-delay: 4s;
	-o-animation-delay: 4s;
	animation-delay: 4s;
}

.slider img:nth-child(1) {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}

<div class="slider">
  <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
</div>