Home
Nick Girga
Simple Animated Carousel

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 CSS v3. It is responsive. It supports dark mode.

Carousel

Author Nick Girga

725

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