Simple Animated Carousel

A simple, animated 2:1 carousel with touch swipe support, based on perky98/Juraj's carousel.

This tailwind example is contributed by Nick Girga, on 27-Apr-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Carousel

Author Nick Girga

Tailwind v3.4 2k 4

Fork Fullscreen

<!--
    Forked from perky98/carousel-3
    (https://tailwindflex.com/@perky98/carousel-3)

Why?
    -----
    When using components via Dioxus (Rust), implementing JavaScript
    isn't 1:1. It CAN be. But most JavaScript, written directly for 
    web browsers, isn't written using conventions that would make 
    sense to Dioxus's `document::eval`. That's what this is. A fork 
    of perky98/Juraj's carousel, using basic JavaScript with explicit 
    scope references, so it's easier to use with Dioxus, while still 
    remaining entirely compatible with vanilla HTML, TailwindCSS, and 
    JavaScript. I also just tweaked it a bit and added features to 
    my liking (e.g. swipe control).
    
    TLDR; more vanilla, more explicit, more compatible

Changes made:
     - fixed auto scroll stopping
     - removed dependency on Alpine.js
       - entirely separated JavaScript logic from HTML
     - use smaller maximum width
     - use global script references
       - useful for Dioxus's `document::eval`
     - hard-coded indicator count
       - to remove Alpine.js dependency
       - should be populated by framework during component initialization (or manually)
     - use real example images (from Unsplash)
     - longer default auto scroll delay
     - made responsive in a way that respects strict 2:1 aspect ratios
       - fixed <=sm size and fixed >sm size
     - implemented swipe control
       - used code from thuggys/carousel (https://tailwindflex.com/@thuggys/carousel)
-->

<section class="bg-gray-100 p-8">
    
    <div class="w-[64mm] sm:w-[128mm] h-[32mm] sm:h-[64mm] mx-auto relative group">
        
        
        <div class="relative overflow-hidden rounded-lg shadow-xl">
            <div id="carousel-track" class="flex transition-transform duration-500 ease-in-out -translate-x-[0mm]">
                <div class="carousel-item min-w-full h-[32mm] sm:h-[64mm] flex items-center justify-center">
                    <img class="object-contain"
                        src="https://images.unsplash.com/photo-1528360983277-13d401cdc186?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="Japan"
                    />
                </div>
                <div class="carousel-item min-w-full h-[32mm] sm:h-[64mm] flex items-center justify-center">
                    <img
                        src="https://images.unsplash.com/photo-1499678329028-101435549a4e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="Italy"
                    />
                </div>
                <div class="carousel-item min-w-full h-[32mm] sm:h-[64mm] flex items-center justify-center">
                    <img
                        src="https://images.unsplash.com/photo-1587974136998-4fcc253b6183?q=80&w=1710&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="Slide 3"
                    />
                </div>
            </div>
        </div>

<button onclick="window.prevCarouselSlide()"
                class="absolute top-1/2 left-4 -translate-y-1/2 bg-white/30 hover:bg-white/50 rounded-full p-1 sm:p-2.5 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
            </svg>
        </button>

<button onclick="window.nextCarouselSlide()"
                class="absolute top-1/2 right-4 -translate-y-1/2 bg-white/30 hover:bg-white/50 rounded-full p-1 sm:p-2.5 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
            </svg>
        </button>

<div class="absolute bottom-2 sm:bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
            <button
                onclick="window.setCarouselSlide(0)"
                class="carousel-indicator w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-colors bg-white">
            </button>
            <button
                onclick="window.setCarouselSlide(1)"
                class="carousel-indicator w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-colors bg-white opacity-50 hover:opacity-75">
            </button>
            <button
                onclick="window.setCarouselSlide(2)"
                class="carousel-indicator w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-colors bg-white opacity-50 hover:opacity-75">
            </button>
        </div>
    </div>
</body>

<script>
    const carouselSlides = document.getElementsByClassName('carousel-item');
    const carouselIndicators = document.getElementsByClassName('carousel-indicator');
    const carouselTrack = document.getElementById('carousel-track');
    const carouselTimerDelay = 5000;
    const carouselXsW = 64;
    const carouselSmW = 128;

// touch vars
    window.touchStartX = 0;
    window.touchEndX = 0;

// current slide index
    window.activeCarouselSlide = 0;

// timer for auto scrolling
    window.carouselTimer = null;

// Add touch events for swipe
    carouselTrack.addEventListener('touchstart', e => {
        window.touchStartX = e.changedTouches[0].screenX;
    }, { passive: true });

carouselTrack.addEventListener('touchend', e => {
        window.touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
    }, { passive: true });

function handleSwipe() {
        const swipeThreshold = 50;
        const diff = touchStartX - touchEndX;

if (Math.abs(diff) > swipeThreshold) {
            if (diff > 0) {
                window.nextCarouselSlide();
            } else {
                window.prevCarouselSlide();
            }
        }
    }

// updates the classes that the track and the indicators use
    window.updateCarouselTrackAndIndicators = function() {
        // set track classes
        carouselTrack.className = 
            'flex transition-transform duration-500 ease-in-out -translate-x-[' +
                (carouselXsW * window.activeCarouselSlide) +
                'mm] sm:-translate-x-[' +
                (carouselSmW * window.activeCarouselSlide) +
                'mm]';

// set indicator classes
        Array.from(carouselIndicators).forEach((indicator, index) => {
            indicator.className = 'carousel-indicator w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-colors bg-white';
            if (index != window.activeCarouselSlide) {
                indicator.classList.add('opacity-50');
                indicator.classList.add('hover:opacity-75');
            }
        });
    }

// resets the timer for auto scrolling
    window.resetCarouselTimer = function() {
        clearInterval(window.carouselTimer);
        window.carouselTimer = setInterval(window.nextCarouselSlide, carouselTimerDelay);
    }

// navigates to the specified carousel slide
    window.setCarouselSlide = function(slide) {
        window.activeCarouselSlide = slide;
        window.resetCarouselTimer();
        window.updateCarouselTrackAndIndicators();
    }

// navigates to next carousel slide
    window.nextCarouselSlide = function() {
        if (window.activeCarouselSlide < carouselSlides.length - 1) {
            // next index
            window.setCarouselSlide(window.activeCarouselSlide + 1);
        } else {
            // wrap back to first index
            window.setCarouselSlide(0);
        }
    }

// navigates to previous carousel slide
    window.prevCarouselSlide = function() {
        if (window.activeCarouselSlide > 0) {
            // previous index
            window.setCarouselSlide(window.activeCarouselSlide - 1);
        } else {
            // wrap back to last index
            window.setCarouselSlide(carouselSlides.length - 1);
        }
    }

// initializes the carousel
    window.initializeCarousel = function() {
        window.resetCarouselTimer();
        window.updateCarouselTrackAndIndicators();
    }

window.initializeCarousel();
</script>

Related Examples

Slider
Responsive slider

Abhiraj

1 year ago

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

Ayyamperumal S

9 months ago

971
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.

Juraj

8 months ago

662
3D Coverflow Slider — Ambient Background
A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

Azeem warraich

1 month ago

187
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

10 months ago

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

Juraj

8 months ago

517
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.6k
Custom Carosel

Md. Tofayel islam

2 years ago

3.8k
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
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.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

709
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

637