Как сделать так, чтобы все изображения отображались на моем слайдере, в то же время различая каждое изображение с собственным тегом div?

Я пытаюсь создать слайдер для веб-страницы, с которой я играю, и хочу, чтобы каждое изображение на моем слайдере имело свой собственный уникальный идентификатор, поэтому мой HTML-код выглядит следующим образом:

<div id="slideshow_testimonial">

    <div id="testi01">
    <img src="http://dummyimage.com/280x200/56AD30/fff.png"/>
    </div>

    <div id="testi02">
    <img src="http://dummyimage.com/280x200/1560f0/fff.png"/>
    </div>

    <div id="testi03">
    <img src="http://dummyimage.com/280x200/C03229/fff.png"/>
    </div>

</div>

Однако, когда я добавляю свой CSS, на слайде появляется только одно изображение, а остальное просто исчезает. Я знаю, что в моем коде CSS что-то не так, но я не уверен, что мне нужно исправить. Ниже мой CSS-код:

slideshow_testimonial { 
    position: relative; 
}

img {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 3;
    -webkit-animation: slideshow 12s linear 0s infinite;
    -moz-animation: slideshow 12s linear 0s infinite;
    -ms-animation: slideshow 12s linear 0s infinite;
    -o-animation: slideshow 12s linear 0s infinite;
    animation: slideshow 12s linear 0s infinite;
}

img:nth-child(2) {
  z-index: 2;
  -webkit-animation: slideshow 12s linear 4s infinite;
  -moz-animation: slideshow 12s linear 4s infinite;
  -ms-animation: slideshow 12s linear 4s infinite;
  -o-animation: slideshow 12s linear 4s infinite;
  animation: slideshow 12s linear 4s infinite;
}

img:nth-child(3) {
   z-index: 1;
  -webkit-animation: slideshow 12s linear 8s infinite;
  -moz-animation: slideshow 12s linear 8s infinite;
  -ms-animation: slideshow 12s linear 8s infinite;
  -o-animation: slideshow 12s linear 8s infinite;
  animation: slideshow 12s linear 8s infinite;
}

@-webkit-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-moz-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-ms-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-o-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}

Я новичок в HTML и CSS, и я все еще в процессе обучения, как это сделать, и я был бы признателен за любую помощь. Спасибо!

Примечание: (1) Я не хочу использовать javascript для этого слайдера, (2) Я действительно хочу, чтобы каждое изображение было уникально идентифицируемым, что является основанием для моего использования тегов div для каждого изображения в слайде.