Image carousel

Uses Flowbite

This tailwind example is contributed by Fagundo67, on 18-Feb-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Carousel

Author Fagundo67

Tailwind v3.4 32k 19

Fork Fullscreen

<div id="default-carousel" class="relative rounded-lg overflow-hidden shadow-lg" data-carousel="static">
        
        <div class="relative h-80 md:h-96" data-carousel-inner>
            
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
                    class="object-cover w-full h-full" alt="Slide 1">
                <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xl font-semibold text-white md:text-2xl dark:text-gray-800">First Slide</span>
            </div>
            
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
                    class="object-cover w-full h-full" alt="Slide 2">
            </div>
            
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
                    class="object-cover w-full h-full" alt="Slide 3">
            </div>
        </div>
        
        <div class="flex absolute bottom-5 left-1/2 z-30 -translate-x-1/2 space-x-2" data-carousel-indicators>
            <button type="button" class="w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400 focus:outline-none focus:bg-gray-400 transition"></button>
            <button type="button" class="w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400 focus:outline-none focus:bg-gray-400 transition"></button>
            <button type="button" class="w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400 focus:outline-none focus:bg-gray-400 transition"></button>
        </div>
        
        <button type="button"
            class="flex absolute top-1/2 left-3 z-40 items-center justify-center w-10 h-10 bg-gray-200/50 rounded-full hover:bg-gray-300 focus:outline-none transition"
            data-carousel-prev>
            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
        </button>
        <button type="button"
            class="flex absolute top-1/2 right-3 z-40 items-center justify-center w-10 h-10 bg-gray-200/50 rounded-full hover:bg-gray-300 focus:outline-none transition"
            data-carousel-next>
            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </button>
    </div>

<p class="mt-5 text-center text-gray-700 dark:text-gray-300">
        This carousel slider component is part of a larger, open-source library of Tailwind CSS components. Learn more
        by going to the official
        <a class="text-blue-600 hover:underline" href="https://flowbite.com/docs/getting-started/introduction/"
            target="_blank">
            Flowbite Documentation
        </a>.
    </p>
    <script src="https://unpkg.com/flowbite@1.4.0/dist/flowbite.js"></script>

</div>

Related Examples

Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Brandon D

4 years ago

33.4k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.5k
Image Carousel

Nikolai

2 years ago

8.1k
3 columns blog section
de columnis, columni, 3 columns

Anonymous

2 years ago

12.8k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.2k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.9k
Event timeline

Laurits

3 years ago

17.8k
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Juraj

1 year ago

2.8k
Product Carousel with Tailwind CSS, Swiper & Alpine.js
A modern, responsive product carousel built with Tailwind CSS, Swiper, and Alpine.js. The component features smooth sliding animations, autoplay, and custom navigation controls. Each product card uses a flexible Tailwind layout and includes dynamically generated demo images, making it easy to drop into any landing page, marketing site, or product showcase. Ideal for showcasing products in a clean, lightweight, and highly customizable way.

Juraj

7 months ago

636
Testimonials

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
Slider
Responsive slider

Abhiraj

1 year ago

3k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2k