Create a Responsive Image Carousel in Tailwind CSS

Image Carousel is a UI element that acts like a slideshow by cycling through different images. You can easily design a Carousel in Tailwind CSS by using anchor tags along with proper width, height, and overflow properties. The Carousel can also be made responsive using the Tailwind responsive utility classes.

Preview Image

Preview

Tailwind CSS CDN Link

<script src="https://cdn.tailwindcss.com"></script>

Approach

Create a proper layout in HTML where there is a main container containing all sub containers called slide which itself contains images and two anchor tags each which will be our left and right arrow.
Provide appropriate width and height to the main container and make sure the overflow of y-axis is hidden to hide the scroll bar. Apply full width and height to the slide container and images to take up full width of the main container.
Provide an id to each slide and according to the position of the images with their respective arrows add the next and previous image id to the href attribute in the anchor tag.
Make sure the width, height, font-size and padding changes with screen size for a responsive design using the responsive utility class of Tailwind CSS.
Add additional styling such as display, padding, margin, position, color etc according to your need using appropriate Tailwind classes.

Example: The below code implements Tailwind CSS to create a responsive image carousel.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <!-- Tailwind CSS CDN -->
    <script src=
"https://cdn.tailwindcss.com">
    </script>
    <style type="text/tailwindcss">
        /* Common Styles */
        @layer components {
            .slide{
                @apply w-full h-full relative
            }
            .image{
                @apply w-full h-full object-cover 
            }
            .arrow {
                @apply md:text-xl sm:text-base text-xs 
                font-bold absolute top-1/2 translate-y-[-50%] 
                scale-[2] rounded-full bg-green-900 
            }
            .prev{
                @apply left-5 sm:px-2 px-1.5 py-0.5 
            }
            .next{
                @apply right-5 sm:px-2 px-1.5 py-0.5 
            }
        }
    </style>
    <title>
        Responsive Image Carousel in Tailwind CSS
    </title>
</head>

<body class="font-serif text-white flex 
    flex-col items-center">

    <p class="md:text-4xl text-emerald-500 
        sm:text-2xl text-[15px] mt-5">
        Responsive Image Carousel in Tailwind CSS
    </p>

    <main class="md:w-[700px] w-[80vw] md:h-[500px] 
        h-[40vw] overflow-y-hidden mt-10 outline 
        outline-8 outline-green-900">
        <div id="slide1" class="slide">
            <img class="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg">
            <a href="#slide3" class="prev arrow">
                &lt;
            </a>
            <a href="#slide2" class="next arrow">
                &gt;
            </a>
        </div>
        <div id="slide2" class="slide">
            <img class="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <a href="#slide1" class="prev arrow">
                &lt;
            </a>
            <a href="#slide3" class="next arrow">
                &gt;
            </a>
        </div>
        <div id="slide3" class="slide">
            <img class="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121512/gfg1.jpg">
            <a href="#slide2" class="prev arrow">
                &lt;
            </a>
            <a href="#slide1" class="next arrow">
                &gt;
            </a>
        </div>
    </main>
</body>

</html>

Output:

fosiGIF

Article Tags :

CSS

Tailwind CSS

Web Templates