css slideshow

esempio

Diego Delso [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], from Wikimedia Commons

By André Koehne (My photo, my books) [GFDL (http://www.gnu.org/copyleft/fdl.html), CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/), CC BY-SA 2.5 (https://creativecommons.org/licenses/by-sa/2.5) or Public domain], via Wikimedia Commons

css

#pippo {
  position: relative;
  padding-bottom: 57%;
  margin: 1em auto;
  overflow: hidden
}
#pippo img {
  position: absolute;
  max-height: 100%;
  width: 100%;
  animation-name: slideshow;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
}
@keyframes slideshow {
 0% {opacity:1}
 17% {opacity:1}
 25% {opacity:0}
 92% {opacity:0}
 100% {opacity:1}
}
#pippo img:nth-of-type(1) {animation-delay: 0s}
#pippo img:nth-of-type(2) {animation-delay: -9s}
#pippo img:nth-of-type(3) {animation-delay: -6s}
#pippo img:nth-of-type(4) {animation-delay: -3s}

html

<div id="pippo">
   <img src="slideshow-1.jpg"/>
   <img src="slideshow-2.jpg"/>
   <img src="slideshow-3.jpg"/>
   <img src="slideshow-4.jpg"/>
</div>