.banner {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.banner-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0; /* 🔥 esconde todas */
  transition: opacity 1s ease-in-out;
}

/* só uma aparece */
.banner-slider img.active {
  opacity: 1;
}