How to Create Animated Image Carousel with CSS

In this tutorial, I’ll show you how to create animated image carousel, logo slider or CSS carousel effect, also known as HTML and CSS image slider carousel animation, using only CSS, without using any JavaScript code.

Before we start our work, we will create two files. One of them will be index.html, it will be our home page. The other one is style.css, so we will have a style file and we can have a logo as well. I will use this over and over. You can find different logos and make a study for your purpose.

The program I am currently using is Visual Studio Code. You can also do this with any text program. Let me close the left area too. Now let’s open the index.html page. First, let’s add a Wrapper code and inside this code I add a slider div. We will write these codes as a beginning. Let’s define the Wrapper and Slider in index.html with a CSS, then style them and define our workspace.

First I assigned a color to the Body tag. Let’s set the objects in the Wrapper class to center the page. And then we set the area where the logos will slide. I want an area like this, let’s give this area a shadow with Box Shadow. In this way, we define our area. The logos will slide within this white space.

Now let’s add our logos. We will add the logos inside the Slider class. But for this, let’s also add a Slide class first. Let’s give it an image tag. As a source, I am adding the image I prepared, binance.png, here. When I save it and look at it, I will see that the image is like this. We haven’t done the sizing yet. We’ll do it in a little while.

index.html


<div class="slider">
    <div class="slide">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
    </div>
    <div class="slide">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="binance.png" alt="Binance" title="How To Create Animated Image Carousel With Css 1">
    </div>
</div>

Thinking that there is more than one logo, I increase the number of the image tag here. So let’s imagine that there are different logos in this way. Now let’s set the height of them and at the same time they should be next to each other, not one below the other. Let’s take care of this detail. First, let’s give height to the slide class. When we give this, nothing will change. Then let’s define it as display:flex in order to be side by side and give the property align-items:center since we need to center the items here. It will look like this. The logos will be sorted to the right as we do this, giving them display:flex.

The primary problem here is that the images go beyond the designated area. And that there is no padding between them as they are lined up one after the other. Let’s fix this too. We need to give this arrangement to the image tags inside the slide. By giving Height:70 and padding values, we adjust the height of both the logos and the distance of the logos to each other.

Now we can move these logos. There will be logos floating from left to right. So we will need to give the keyframe. We will need to use the Keyframe property. Here’s how we will scroll from 0% to 100% in the X-axis and since it is important where we do this scroll, we will define a new property in the slide class. The feature we will define will be the Animation feature, it will be the slideshow. Here we specify how many seconds this process should be completed. Since it will be linear and must be in an infinite loop, we write Infinite here. When I save this style.css, we will get a result like this. As you can see, the result was close to what we wanted.

The logos move to the left and start after the logos end, not providing continuity. It is better understood that these are different logos from one. In order to ensure this continuity, we will apply the following method. I open the index.html page. I select the slide class here and create a copy below it. There will be a result like this. We will integrate the bottom part to the right, so these logos will not look like they are finished, they will take on a continuous look. It will look the way we want. We’ll put them on a single line first. I open style.css. I add a line just below the slider. I add the display:flex line. As you can see they will overlap.

We will also solve the overflow problem with the Overflow feature. We need to hide the outside parts. Therefore, we add a new line to the slider part. And we call it overflow:hidden. As you can see when I save this, they will not be visible when they go outside the area we have determined, they will be hidden. In fact, this is enough work. From now on, what we’re going to do will be a little more embellishment.

We’re going to add a new absolute:position and give it a gradient. Our goal is to make these edges look a little softer. This is the codes we need to add. We specify various properties before and after the slider class and flip it vertically. When we do this, it will see the effect like this when I save it because it provides transparency from 0 to 100 because we make a gradient here. We will have put such an effect in the slider’s before and after.

It gives us the feeling of coming invisibly from the right side, appearing and disappearing from the left side. It’s the background part here that gives that feeling. We put this edit we made in before and we also put it in after. In order to rotate After 180 degrees vertically, we give a 180 degree rotation since there should be white on the right side and transparency on the left side. This is how we solve this process. And although we will see our animation full screen, we can make the logos slide in this way with only CSS techniques, without using any JavaScript code or files.

style.css


.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider {
    width: 1000px;
    height: 100px;
    position: relative;
    background: white;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
    display: flex;
    overflow: hidden;
}

.slide {
    height: 100px;
    display: flex;
    align-items: center;
    animation: slideshow 10s linear infinite;
}

.slide img {
    height: 70px;
    padding: 0 30px 0 30px;
}

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

.slider::before,
.slider::after {
    height: 100px;
    width: 200px;
    position: absolute;
    content: "";
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

.slider::before {
    left: 0;
    top: 0;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

Popular Tutorials

How to Create Animated Image Carousel with CSS

In this tutorial, I’ll show you how to create animated image carousel,…

Animated SVG Icons | SVG Stroke Animation jQuery

How to use animated SVG on your website? How about animating eye-catching…

VS Code Live Server and Perfect Browser Auto Refresh Feature

In this VS Code tutorial, we are going to take a look…

Smooth Scrolling Compatible with All Browsers

On long web pages, I’ll show you how to add Smooth Scrolling…

Animated Colorful Gradient Background with CSS

With CSS, you can do many things to add color to your…

5 Awesome VS Code Plugins Useful in HTML

I have been using VS Code for a while now and I…