How to make a carousel using CSS ?

Last Updated : 01 Apr, 2022

In this article, we will be going to learn how to make a carousel using plain CSS without using any other library or framework. A carousel is a slideshow that contains a collection of rotating banners/images. Usually, you can see carousels on the home page of a website. It makes your website more attractive.

We are going to make a 4 image carousel that can be controlled by buttons places at bottom of the carousel. There is a text at the center of the carousel which is fixed and can’t move with movement in the image. The images are moving after a fixed interval of time in the background.

We are using HTML as a basic structure for our carousel and CSS to decorate it. Below is the step-by-step procedure that we will be going to follow.

Step 1: Firstly, we add HTML code. It contains the main container and inside a container, there are two things:

the main heading of the web page
is a div with class content containing the whole carousel structure.

Step 2: Now, we will add the following two parts in the content div:

The first part is a div with class carousel-content. The content (heading and subheading) is placed in the center of the carousel. This will remain static in the carousel.
The second part is a div with a class slideshow. All the moving parts of the carousel will be inside this div.

Step 3: The slideshow div contains the following elements:

Four carousel control buttons
a slideshow wrapper that wraps all 4 carousel images.

Then, we add CSS for styling our carousel and to make the carousel responsive for all screen sizes.

NOTE: We will use "rem" and "%" units 
as much as possible to achieve responsiveness 
easily.

Below is the implementation of the above approach.

Example:

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
        /* default stylings */ 
        * { 
            box-sizing: border-box; 
            margin: 0; 
            padding: 0; 
        } 
  
        /* provides background color to body */ 
        body { 
            background-color: rgb(255, 235, 235); 
        } 
  
        /* ----- container stylings:  
        -> centers the whole content of the page 
        -> defines width and height for container ----- */ 
        .container { 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            margin: auto; 
            width: 800px; 
            height: 600px; 
        } 
        /* ----- end of container stylings ----- */ 
  
        /* provides padding to main heading */ 
        .main-heading { 
            padding: 2rem 0 2rem 0; 
        } 
  
        .content { 
            position: relative; 
        } 
  
        /* ----- carousel content stylings ----- */ 
        /* places the carousel content on center of the carousel */ 
        .carousel-content { 
            position: absolute; 
            /*to center the content horizontally and vertically*/ 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%);  
            text-align: center; 
            z-index: 50; 
        } 
        .carousel-heading { 
            font-size: 3rem; 
            color: #308d46; 
            margin-bottom: 1rem; 
        } 
        /*----- end of carousel content stylings ----- */ 
  
        /* ----- slideshow stylings ----- */ 
        .slideshow { 
            height: 100%; 
            overflow: hidden; /* to hide slides in x-direction */ 
            position: relative; 
        } 
        /* wrapper which wraps all the slideshow images stylings */ 
        .slideshow-wrapper { 
            display: flex; 
            /* We give it width as 400% because we are making a  
               4 image carousel. If you want to make for example,  
               5 images carousel, then give width as 500%. */ 
            width: 400%; 
            height: 100%; 
            position: relative; 
            /* you can change the animation settings from below */ 
            animation: slideshow 20s infinite; 
         } 
        /* define width and height for images*/ 
        .slide { 
            width: 100%; 
            height: 100%; 
        } 
        .slide-img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover;  
        } 
        /* @keyframes are used to provide animations 
           We make these settings for 4 image carousel. 
           Make modification according to your needs. */ 
        @keyframes slideshow { 
            0%  { left: 0; } 
            10% { left: 0; } 
            15% { left: -100%; } 
            25% { left: -100%; } 
            30% { left: -200%; } 
            40% { left: -200%; } 
            45% { left: -300%; } 
            55% { left: -300%; } 
            60% { left: -200%; } 
            70% { left: -200%; } 
            75% { left: -100%; } 
            85% { left: -100%; } 
            90% { left: 0%; } 
        } 
        /* ----- end of slideshow stylings ----- */ 
  
        /* ----- carousel control buttons stylings ----- */ 
        .slide-btn { 
            background-color: #bbb; 
            border-radius: 50%; 
            border: .2rem solid #d38800; 
            width: 1.2rem; 
            height: 1.2rem; 
            outline: none; 
            cursor: pointer; 
            /* stylings for positioning the buttons at 
               the bottom of the carousel */ 
            position: absolute; 
            bottom: 3%; 
            left: 50%; 
            transform: translateX(-50%); 
            z-index: 70; 
        } 
        /* As we provide position as absolute,  
        the buttons places one over the other.  
        So, we have to place them individually 
        at their correct positions. */ 
        .slide-btn-1 { 
            left: 45%; 
        } 
        .slide-btn-2 { 
            left: 50%; 
        } 
        .slide-btn-3 { 
            left: 55%; 
        } 
        .slide-btn-4 { 
            left: 60%; 
        } 
        /* When we focus on the particular button,  
        the animation stops to that particular image  
        to which the button is associated. */ 
        .slide-btn-1:focus~.slideshow-wrapper { 
            animation: none; 
            left: 0; 
        } 
        .slide-btn-2:focus~.slideshow-wrapper { 
            animation: none; 
            left: -100%; 
        } 
        .slide-btn-3:focus~.slideshow-wrapper { 
            animation: none; 
            left: -200%; 
        } 
        .slide-btn-4:focus~.slideshow-wrapper { 
            animation: none; 
            left: -300%; 
        } 
        /* when we focus on the button, the background color changes */ 
        .slide-btn:focus { 
            background-color: #308d46; 
        } 
        /* ----- end of carousel control buttons stylings ----- */ 
    </style> 
    <title>Geeks For Geeks</title> 
</head> 
<body> 
    <div class="container"> 
        <h1 class="main-heading">Responsive Carousel using CSS</h1> 
        <div class="content"> 
            <!-- The content which is placed at the center of the carousel -->
            <div class="carousel-content"> 
                <h1 class="carousel-heading"> 
                    GeeksforGeeks 
                </h1> 
                <h3>A computer science portal for geeks</h3> 
            </div> 
            <div class="slideshow"> 
                <!-- carousel control buttons -->
                <button class="slide-btn slide-btn-1"></button> 
                <button class="slide-btn slide-btn-2"></button> 
                <button class="slide-btn slide-btn-3"></button> 
                <button class="slide-btn slide-btn-4"></button> 
                <!-- carousel wrapper which contains all images -->
                <div class="slideshow-wrapper"> 
                    <div class="slide"> 
                        <img class="slide-img"
                            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210818140124/image1-300x169.png"> 
                    </div> 
                    <div class="slide"> 
                        <img class="slide-img"
                            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210818140126/image2-300x169.png"> 
                    </div> 
                    <div class="slide"> 
                        <img class="slide-img" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210818190339/image5-300x185.png"> 
                    </div> 
                    <div class="slide"> 
                        <img class="slide-img" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210818141837/image4-300x168.png"> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output: From this, we can see that the carousel is looking beautiful for all screen sizes i.e. mobile, tablet, and laptop screens. Do modifications to the above code according to your choice, include it in your project, and have fun building awesome projects.