Carousel

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

Tailwind v3.4 3.3k 12

<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

PlayStore Style Carousel
PlayStore Style Carousel

Omer fils ELENGA

8 months ago

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

ORGIN_DREAMS

1 year ago

2.1k
grid masoneri
grid masoneri

Omer fils ELENGA

9 months ago

666
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)

Salah eldein

11 months ago

708
Image carousel
Uses Flowbite

Anonymous

1 year ago

3.6k
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.2k
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)

Salah eldein

11 months ago

761
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
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

8 months ago

646
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
3D Animated Image Gallery
3D Animated Image Gallery

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

2 years ago

10k