how to create image carousel

02/22/2025

-

When a company wants to showcase its strength, It usually lists some pictures of the companies it collaborates with, scrolling through them. Now let's implement this funciton.

We have several ways to implement this. First, we can use pure HTML and CSS to implement this.

Let's prepare the html first.

<div class="container">
  <div class="group">
    <img src="https://placehold.co/300x150/000000/FFFFFF/png" alt="Image 1" />
    <img src="https://placehold.co/300x150/FF0000/FFFFFF/png" alt="Image 2" />
    <img src="https://placehold.co/300x150/00FF00/FFFFFF/png" alt="Image 3" />
  </div>
  <div class="group" aria-hidden="true">
    <img src="https://placehold.co/300x150/000000/FFFFFF/png" alt="Image 1" />
    <img src="https://placehold.co/300x150/FF0000/FFFFFF/png" alt="Image 2" />
    <img src="https://placehold.co/300x150/00FF00/FFFFFF/png" alt="Image 3" />
  </div>
</div>

Maybe you will ask why we need to repeat the images. It's because we want to create a continuous scrolling effect. If you don't repeat the images, the carousel will be empty when the images are scrolled to the end. You can try to remove the repeat images and see the result then.

Now, let's implement the CSS.

.container {
  width: 900px;
  height: 150px;
  overflow: hidden;
  display: flex;
}

.group {
  display: flex;
  width: 100%;
  will-change: transform;
  animation: scrolling 10s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

Since the animation is linear, we can use the animation-play-state property to pause the animation when the mouse is over the carousel.

.container:hover .group {
  animation-play-state: paused;
}

That's it. Now you have a simple image carousel.