Pure CSS3 Image Carousel Using Flexbox and Keyframe Animation

This article demonstrates how to create a lightweight, pure‑CSS3 image carousel with a fresh “minimalist” style using Flexbox layout and @keyframes animation, requiring no JavaScript.

HTML markup for the slider:

<div class="slider">
  <div class="slides">
    <img src="img/slide1.jpg" alt="">
    <img src="img/slide2.jpg" alt="">
    <img src="img/slide3.jpg" alt="">
    <img src="img/slide4.jpg" alt="">
  </div>
</div>

Corresponding CSS styles and animation:

/* Basic slider style */
.slider {
  width: 100%; /* full width */
  margin: 0 auto; /* center horizontally */
  position: relative;
  overflow: hidden;
}

/* Slides container */
.slides {
  display: flex;
  width: 400%;
  animation: slide 10s infinite;
}

/* Images inside slides */
.slides img {
  width: 25%;
}

/* Keyframes for sliding effect */
@keyframes slide {
  0% { transform: translateX(0); }
  20% { transform: translateX(0); }
  25% { transform: translateX(-25%); }
  45% { transform: translateX(-25%); }
  50% { transform: translateX(-50%); }
  70% { transform: translateX(-50%); }
  75% { transform: translateX(-75%); }
  95% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}