.slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

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

  opacity: 0;
  animation: fade 12s infinite;
}

.slider img:nth-child(1) { animation-delay: 0s; }
.slider img:nth-child(2) { animation-delay: 4s; }
.slider img:nth-child(3) { animation-delay: 8s; }

/* フェードアニメーション */
@keyframes fade {
  0%, 8%   { opacity: 1; }
  33%,100% { opacity: 0; }
}