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

3D Animated Image Gallery
3D Animated Image Gallery

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

2 years ago

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

10 months ago

703
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

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

Omer fils ELENGA

8 months ago

727
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

9 months ago

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

ORGIN_DREAMS

1 year ago

2k
responsive slider carousel
slider carousel

Abhiraj

1 year ago

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

10 months ago

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

Maxim

2 years ago

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

dev cheick

2 years ago

4.5k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.5k
PlayStore Style Carousel
PlayStore Style Carousel

Omer fils ELENGA

7 months ago

400