Home
Salah eldein
Responsive Image Carousel with Alpine.js

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

Carousel

Author Salah eldein

319

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

Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

32k
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
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

286
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

65
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

2 months ago

467
Image Carousel

Author:
Nikolai

1 year ago

7.2k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

2 months ago

69
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
Galerie Interactive
Galerie Interactive

Author:
Omer fils ELENGA

1 month ago

60
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

245
card section neon
card section neon

Author:
Omer fils ELENGA

3 weeks ago

236
Carousel

Author:
Juraj

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components