I have a task to enhance the current code provided below, which currently works with only two images.
HTML:
<div id="cf">
<img class="bottom" src="<?php bloginfo('template_directory') ?>/assets/img/image1" />
<img class="top" src="<?php bloginfo('template_directory') ?>/assets/img/image2" />
</div>
CSS:
#cf {
position:relative;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 4s ease-in-out;
-moz-transition: opacity 4s ease-in-out;
-o-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}
I believe that small adjustments can help this code support more than just two images. Any suggestions on how I can achieve that?