Home
Juraj
Carousel

Carousel

This tailwind example is contributed by Juraj, on 14-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Carousel

Author Juraj

2.7k

Fork Fullscreen

<section class="bg-gray-100 p-8">
    <div x-data="{ activeSlide: 0, slides: 3, timer: null }" 
         x-init="timer = setInterval(() => activeSlide = (activeSlide + 1) % slides, 3000)"
         class="max-w-3xl mx-auto relative group">
        
        <div class="relative overflow-hidden rounded-lg shadow-xl">
            <div class="flex transition-transform duration-500 ease-in-out"
                 :style="`transform: translateX(-${activeSlide * 100}%)`">
                <div class="min-w-full h-64 bg-blue-500 flex items-center justify-center text-white text-4xl">1</div>
                <div class="min-w-full h-64 bg-green-500 flex items-center justify-center text-white text-4xl">2</div>
                <div class="min-w-full h-64 bg-purple-500 flex items-center justify-center text-white text-4xl">3</div>
            </div>
        </div>

Related Examples

Image carousel
Uses Flowbite

Author:
Fagundo67

3 years ago

31.4k
Nice and simple carousel
Nice and simple carousel, fully responsive.

Author:
dev cheick

1 year ago

4k
PlayStore Style Carousel
PlayStore Style Carousel

Author:
Omer fils ELENGA

1 month ago

84
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

31.9k
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

1 month ago

126
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

9 months ago

1.7k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.9k
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.

Author:
Juraj

1 month ago

60
grid masoneri
grid masoneri

Author:
Omer fils ELENGA

1 month ago

85
Slider
Responsive slider

Author:
Abhiraj

1 year ago

2.4k
Carousel

Author:
Crimson

1 year ago

6.8k
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components