How to make a carousel using CSS ?

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.
surinderdawra388
simmytarika5
CSS-Properties
CSS-Questions
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type