.slideshow {
      position: relative;
      width: 1400px;   /* adjust */
      height: 500px;
      overflow: hidden;
    }

    .slideshow img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      animation: fade 42s infinite;
      animation-fill-mode: both;  /* keep last keyframe until next loop */
    }

    /* Offset each image so they take turns */
    .slideshow img:nth-child(1) { animation-delay: 0s; }
    .slideshow img:nth-child(2) { animation-delay: 6s; }
    .slideshow img:nth-child(3) { animation-delay: 12s; }
    .slideshow img:nth-child(4) { animation-delay: 18s; }
    .slideshow img:nth-child(5) { animation-delay: 24s; }
    .slideshow img:nth-child(6) { animation-delay: 30s; }
    .slideshow img:nth-child(7) { animation-delay: 36s; }

   @keyframes fade {
    0% { opacity: 0; }
    5% { opacity: 1; }
   10% { opacity: 1; }
   15% { opacity: 1; }
   20% { opacity: 1; }
   25% { opacity: 0; }
   30% { opacity: 0; }