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

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

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

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

Maxim

2 years ago

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

512
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

815
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.1k
Testimonials

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

1 year ago

2.3k
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
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

594
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

1.2k
Custom Carosel

Md. Tofayel islam

2 years ago

3.8k
Carousel

Juraj

1 year ago

3.2k
3D Animated Image Gallery
3D Animated Image Gallery

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

2 years ago

9.9k