<style>
.slideshow { width: 100%; overflow: hidden; position: relative; }
.slide { width: 100%; position: absolute; opacity: 0; animation: fade 16s infinite; }
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }
.slide:nth-child(4) { animation-delay: 12s; }
@keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
30% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 500px;
  margin: auto;
  overflow: hidden;
  padding: center;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  animation: slide 12s infinite;
}

.slides img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

@keyframes slide {
  0%, 25% { transform: translateX(0); }
  26%, 50% { transform: translateX(-100%); }
  51%, 75% { transform: translateX(-200%); }
  76%, 100% { transform: translateX(-300%); }
}

</style>