css slideshow según

by CarambaMoreno

HTML

<div class="caramba-moreno--fade-slideshow-css">
  <div class="slides">
    <div class="slide">
      <img src="https://i0.wp.com/avicolaaguablanca.com/wp-content/uploads/2024/07/limpieza-avicola-agua-blanca-jpg.webp?resize=508%2C694&amp;ssl=1"/>
    </div>
    <div class="slide">
      <img src="https://i0.wp.com/avicolaaguablanca.com/wp-content/uploads/2024/07/seguridad2-avicola-agua-blanca-jpg.webp?resize=652%2C460&amp;ssl=1"/>
    </div>
    <div class="slide" style="background-color: red">
      TERCERO
    </div>
  </div>
</div>

CSS

.caramba-moreno--fade-slideshow-css {
  position: relative;
  width: 100%;
  height: 100vh; /* Adjust as needed */
  overflow: hidden;
}

.slides {
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fade 15s infinite; /* 5 seconds per slide for 3 slides */
  animation-timing-function: ease-in-out;
}

.slide > div {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide:nth-child(1) {
  animation-delay: -10s;
}

.slide:nth-child(2) {
  animation-delay: -5s;
}

.slide:nth-child(3) {
  animation-delay: 0s;
}

@keyframes fade {
  0%, 26.66%, 100% { opacity: 0; }
  6.66%, 20% { opacity: 1; }
}