Responsive Image Carousel with Alpine.js

Forked from @salah-eldein/responsive-image-carousel-with-alpine-js-2

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 v3.4. It is responsive.

Carousel

Author Salah eldein

Tailwind v3.4 709 2

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"
        aria-label="Previous"
      >
        <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"
        aria-label="Next"
      >
        <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="i in pagesCount" :key="`dot-${i}`">
          <button
            @click="goTo(i-1)"
            class="w-3 h-3 rounded-full transition-colors"
            :class="{ 'bg-blue-600': current === (i-1), 'bg-gray-300': current !== (i-1) }"
            :aria-label="`اذهب إلى الصفحة ${i}`"
          ></button>
        </template>
      </div>
    </div>
  </div>

slides: [
          { id: 1,  image: 'https://picsum.photos/id/10/800/600' },
          { id: 2,  image: 'https://picsum.photos/id/11/800/600' },
          { id: 3,  image: 'https://picsum.photos/id/12/800/600' },
          { id: 4,  image: 'https://picsum.photos/id/13/800/600' },
          { id: 5,  image: 'https://picsum.photos/id/14/800/600' },
          { id: 6,  image: 'https://picsum.photos/id/15/800/600' },
          { id: 7,  image: 'https://picsum.photos/id/16/800/600' },
          { id: 8,  image: 'https://picsum.photos/id/17/800/600' },
          { id: 9,  image: 'https://picsum.photos/id/18/800/600' },
          { id: 10, image: 'https://picsum.photos/id/19/800/600' },
          { id: 11, image: 'https://picsum.photos/id/20/800/600' },
        ],

// التراك مع نسخ مكررة للبداية والنهاية
        track: [],

get pagesCount() {
          return Math.max(1, this.slides.length - this.visibleSlides + 1);
        },

get trackStyle() {
          const translate = `transform: translateX(-${this.internalIndex * this.slidePercentage}%);`;
          const transition = this.useTransition ? 'transition: transform 0.5s ease-in-out;' : 'transition: none;';
          return `${translate} ${transition}`;
        },

init() {
          this.updateVisibleSlides();
          this.buildTrack();
          window.addEventListener('resize', () => {
            const prevCurrent = this.current;
            this.updateVisibleSlides();
            this.buildTrack(prevCurrent); // احفظ نفس الصفحة المنطقية بعد الريسايز
          });
        },

updateVisibleSlides() {
          if (window.innerWidth < 768) {
            this.visibleSlides = 1;
          } else {
            this.visibleSlides = 6;
          }
          this.slidePercentage = 100 / this.visibleSlides;
        },

buildTrack(keepCurrent = null) {
          if (keepCurrent !== null) {
            this.current = Math.max(0, Math.min(keepCurrent, this.pagesCount - 1));
          } else {
            this.current = Math.max(0, Math.min(this.current, this.pagesCount - 1));
          }

const head = this.slides.slice(-this.visibleSlides);
          const tail = this.slides.slice(0, this.visibleSlides);
          this.track = [...head, ...this.slides, ...tail];

// ابدأ داخل التراك بعد الـ head
          this.useTransition = false;
          this.internalIndex = this.current + this.visibleSlides;

// تفعيل الترانزيشن بعد تيك بسيط
          requestAnimationFrame(() => { this.useTransition = true; });
        },

next() {
          this.current = (this.current + 1) % this.pagesCount;
          this.internalIndex += 1;
        },

prev() {
          this.current = (this.current - 1 + this.pagesCount) % this.pagesCount;
          this.internalIndex -= 1;
        },

goTo(index) {
          index = Math.max(0, Math.min(index, this.pagesCount - 1));
          // حساب الفرق للوصول بسرعة
          const targetInternal = index + this.visibleSlides;
          this.current = index;
          this.internalIndex = targetInternal;
        },

onTransitionEnd() {
          // لو عبرنا آخر عنصر حقيقي (دخلنا في tail clone)
          if (this.internalIndex >= this.slides.length + this.visibleSlides) {
            this.useTransition = false;
            this.internalIndex = this.visibleSlides; // اقفز لبداية الحقيقي
            requestAnimationFrame(() => { this.useTransition = true; });
          }
          // لو عبرنا أول عنصر حقيقي (دخلنا في head clone)
          if (this.internalIndex <= 0) {
            this.useTransition = false;
            this.internalIndex = this.slides.length; // اقفز لنهاية الحقيقي
            requestAnimationFrame(() => { this.useTransition = true; });
          }
        },

handleImageError(slide) {
          slide.image = 'https://picsum.photos/id/21/800/600';
        }
      }
    }
  </script>
</body>

Related Examples

pile carde scroll
pile carde scroll

Omer fils ELENGA

9 months ago

649
responsive slider carousel
slider carousel

Abhiraj

1 year ago

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

Michael Andreuzza

2 years ago

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

Nick Girga

1 year ago

2k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

284
Image Gallery Displayed in a Carousel
Trying to pick one scheme that displays on a varienty of background colors.

Sherry Lynne

2 months ago

152
3D Animated Image Gallery
3D Animated Image Gallery

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

2 years ago

10k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.6k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

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

Juraj

1 year ago

3.4k