テンプレート:バナーカルーセル/styles.css

@keyframes slide {
  0%, 33.33% {
    transform: translateX(0);
  }
  33.34%, 66.66% {
    transform: translateX(-100%);
  }
  66.67%, 100% {
    transform: translateX(-200%);
  }
}

.carousel {
  width: 430px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  width: 300%;
  height: 100%;
  animation: slide 15s infinite;
}

.carousel-item {
  width: 33.33%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel:hover .carousel-inner {
  animation-play-state: paused;
}