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

Our services
Component: Interactive Services Carousel Overview: A card-based carousel built with HTML5 and Tailwind CSS, powered by Vanilla JavaScript. It displays Adeoar's 6 main services with a responsive layout and smooth transitions. Technical Features: Responsive: Displays 3 columns on desktop (md breakpoint) and 1 column on mobile devices. Dependencies: Tailwind CSS (CDN or compiled) + Native JavaScript (no external libraries like Swiper or Slick required). Icons: Inline SVG icons (Heroicons style). Functionalities: Navigation: Side buttons (prev/next) and bottom pagination (indicator dots). Automation: Autoplay runs every 4 seconds (infinite loop logic). Interaction: Autoplay pauses automatically on mouse hover (mouseenter/mouseleave). Style & Design (UX/UI): Default State: White background, soft shadows, pastel-colored icon backgrounds. Hover State (Active): Zoom Effect: The card scales up (scale-105). Color Inversion: Background changes to Navy Blue (bg-blue-900) and text turns white for high contrast. Details: The icon background turns white, and the icon stroke takes the dark blue color.

Juan D. Cortorreal

11 months ago

1.2k
Image Carousel

Nikolai

2 years ago

8.1k
card section neon
card section neon

Omer fils ELENGA

8 months ago

1.3k
3D Animated Image Gallery
3D Animated Image Gallery

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

2 years ago

10k
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Juraj

1 year ago

2.3k
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
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.3k
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 Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.2k
pile carde scroll
pile carde scroll

Omer fils ELENGA

9 months ago

649
Custom Carosel

Md. Tofayel islam

2 years ago

3.8k