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

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:
Anonymous

11 months ago

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

Author:
Maxim

1 year ago

12.4k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

5 months ago

1.1k
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

30.5k
carousel

Author:
Crimson

9 months ago

2.4k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

6 months ago

888
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

175
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

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

Author:
Hielke Brandsma

11 months ago

2.1k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

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

Author:
Juraj

5 months ago

1.4k
Carousel

Author:
Crimson

9 months ago

5.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components