Home
Juraj
Responsive Image Carousel with Alpine.js

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)

This tailwind example is contributed by Juraj, on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Carousel

Author Juraj

1.2k

6

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
        [x-cloak] { display: none !important; }
        .slide-transition {
            transition: transform 0.5s ease-in-out;
        }
    </style>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-12">
        
        <div 
            x-data="carousel()"
            x-cloak
            class="relative"
        >
            <div class="relative overflow-hidden rounded-lg shadow-xl bg-white">
                <div 
                    class="flex slide-transition"
                    :style="`transform: translateX(-${currentSlide * slidePercentage}%)`"
                >
                    <template x-for="(slide, index) in slides" :key="slide.id">
                        <div class="w-full md:w-1/3 flex-shrink-0 px-2 py-4">
                            <div class="rounded-lg overflow-hidden shadow-md h-full">
                                <div class="bg-gray-200 h-48 md:h-64 flex items-center justify-center">
                                    <img 
                                        :src="slide.image" 
                                        :alt="slide.title" 
                                        class="w-full h-full object-cover"
                                        @error="handleImageError(slide)"
                                    >
                                </div>
                                <div class="p-4">
                                    <h3 x-text="slide.title" class="text-xl font-semibold"></h3>
                                    <p x-text="slide.description" class="text-gray-600 mt-2"></p>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

<button 
                @click="prev()"
                class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full w-10 h-10 flex items-center justify-center shadow-md z-10 -ml-4"
                :disabled="currentSlide === 0"
                :class="{ 'opacity-50 cursor-not-allowed': currentSlide === 0 }"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <button 
                @click="next()"
                class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full w-10 h-10 flex items-center justify-center shadow-md z-10 -mr-4"
                :disabled="currentSlide >= slides.length - visibleSlides"
                :class="{ 'opacity-50 cursor-not-allowed': currentSlide >= slides.length - visibleSlides }"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </button>

<div class="flex justify-center mt-4 space-x-2">
                <template x-for="(slide, index) in slides" :key="slide.id">
                    <button
                        @click="goTo(index)"
                        class="w-3 h-3 rounded-full transition-colors"
                        :class="{ 'bg-blue-600': currentSlide === index, 'bg-gray-300': currentSlide !== index }"
                        :aria-label="`Prejsť na slide ${index + 1}`"
                    ></button>
                </template>
            </div>
        </div>
    </div>

<script>
        function carousel() {
            return {
                currentSlide: 0,
                visibleSlides: 1,
                slidePercentage: 100,
                slides: [
                    { 
                        id: 1, 
                        image: 'https://picsum.photos/id/10/800/600', 
                        title: ' Nature 1', 
                        description: 'Nature first' 
                    },
                    { 
                        id: 2, 
                        image: 'https://picsum.photos/id/11/800/600', 
                        title: 'Nature 2', 
                        description: 'Nature second' 
                    },
                    { 
                        id: 3, 
                        image: 'https://picsum.photos/id/12/800/600', 
                        title: 'Nature 3', 
                        description: 'Nature 3th' 
                    },
                    { 
                        id: 4, 
                        image: 'https://picsum.photos/id/13/800/600', 
                        title: 'Nature 4', 
                        description: 'Nature last' 
                    }
                ],
                init() {
                    this.updateVisibleSlides();
                    window.addEventListener('resize', () => {
                        this.updateVisibleSlides();
                    });
                },
                updateVisibleSlides() {
                    if (window.innerWidth < 768) {
                        this.visibleSlides = 1;
                        this.slidePercentage = 100;
                    } else {
                        this.visibleSlides = 3;
                        this.slidePercentage = 100 / 3;
                    }
                },
                next() {
                    if (this.currentSlide < this.slides.length - this.visibleSlides) {
                        this.currentSlide += 1;
                    }
                },
                prev() {
                    if (this.currentSlide > 0) {
                        this.currentSlide -= 1;
                    }
                },
                goTo(index) {
                    if (index <= this.slides.length - this.visibleSlides) {
                        this.currentSlide = index;
                    } else {
                        this.currentSlide = this.slides.length - this.visibleSlides;
                    }
                },
                handleImageError(slide) {
                    // Fallback obrázok ak sa pôvodný nepodarí načítať
                    slide.image = 'https://picsum.photos/id/20/800/600';
                }
            }
        }
    </script>
</body>

Related Examples

How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.5k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

5 months ago

864
Image carousel
Uses Flowbite

Author:
Anonymous

10 months ago

2.3k
responsive slider carousel
slider carousel

Author:
Abhiraj

9 months ago

2.1k
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

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

Author:
Nick Girga

5 months ago

769
Carousel

Author:
Crimson

9 months ago

5.6k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

31.1k
Image Carousel

Author:
Nikolai

1 year ago

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

Author:
Maxim

1 year ago

12.3k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

5 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12