Home
Salah eldein
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 Salah eldein, on 07-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Carousel

Author Salah eldein

240

Fork Fullscreen

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

}
                    { 
                        id: 5, 
                        image: 'https://picsum.photos/id/13/800/600',

}
                    { 
                        id: 6, 
                        image: 'https://picsum.photos/id/13/800/600',

}
                    { 
                        id: 7, 
                        image: 'https://picsum.photos/id/13/800/600',

}
                    { 
                        id: 8, 
                        image: 'https://picsum.photos/id/13/800/600',

}
                    { 
                        id: 9, 
                        image: 'https://picsum.photos/id/13/800/600',

}
                    { 
                        id: 10, 
                        image: 'https://picsum.photos/id/13/800/600',

}
                    { 
                        id: 11, 
                        image: 'https://picsum.photos/id/13/800/600',

}
                ],
                init() {
                    this.updateVisibleSlides();
                    window.addEventListener('resize', () => {
                        this.updateVisibleSlides();
                    });
                },
                updateVisibleSlides() {
                    if (window.innerWidth < 768) {
                        this.visibleSlides = 1;
                        this.slidePercentage = 100;
                    } else {
                        this.visibleSlides = 6;
                        this.slidePercentage = 100 / 6;
                    }
                },
                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

Slider
Responsive slider

Author:
Abhiraj

1 year ago

2.4k
Image carousel
Uses Flowbite

Author:
Fagundo67

3 years ago

31.4k
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

9 months ago

2.1k
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.9k
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

Author:
Omer fils ELENGA

1 month ago

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

Author:
Anonymous

2 years ago

20.8k
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

1 month ago

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

Author:
Juraj

1 month ago

81
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)

Author:
Salah eldein

3 months ago

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

Author:
Juraj

1 month ago

60
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.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)

Author:
Salah eldein

3 months ago

420

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components