Image carousel

Uses Flowbite

This tailwind example is contributed by Anonymous, on 26-Nov-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Carousel

Author Anonymous

Tailwind v3.4 3.6k 10

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

Team Hero Section with Carousel
A clean and responsive hero section featuring an experts carousel built with Tailwind CSS, Swiper, and Alpine.js. The section highlights key experts with contact details and a clear call-to-action, making it ideal for landing pages and service-focused websites.

Juraj

9 months ago

522
Custom Carosel

Md. Tofayel islam

2 years ago

3.9k
Testimonials

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

1 year ago

2.3k
carousel

Crimson

1 year ago

3.6k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Hielke Brandsma

1 year ago

3.2k
Carousel

Juraj

1 year ago

3.4k
Simple Animated Carousel
A simple, animated 2:1 carousel with touch swipe support, based on perky98/Juraj's carousel.

Nick Girga

1 year ago

2k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

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

Anonymous

2 years ago

21.6k
grid masoneri
grid masoneri

Omer fils ELENGA

9 months ago

668
pile carde scroll
pile carde scroll

Omer fils ELENGA

9 months ago

653
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k