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

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

Product Carousel with Tailwind CSS, Swiper & Alpine.js
A modern, responsive product carousel built with Tailwind CSS, Swiper, and Alpine.js. The component features smooth sliding animations, autoplay, and custom navigation controls. Each product card uses a flexible Tailwind layout and includes dynamically generated demo images, making it easy to drop into any landing page, marketing site, or product showcase. Ideal for showcasing products in a clean, lightweight, and highly customizable way.

Author:
Juraj

1 week ago

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

Author:
Salah eldein

3 months ago

189
grid masoneri
grid masoneri

Author:
Omer fils ELENGA

4 weeks ago

42
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

31.3k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

1 month ago

50
carousel

Author:
Crimson

1 year ago

2.8k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.9k
Carousel

Author:
Crimson

1 year ago

6.7k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

1 month ago

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

Author:
ORGIN_DREAMS

8 months ago

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

1 year ago

2.3k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

1 month ago

87

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components