Responsive Image Carousel with Alpine.js

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

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

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

Image Carousel

Nikolai

2 years ago

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

Omer fils ELENGA

9 months ago

902
omerlinkStream
omerlinkStream

Omer fils ELENGA

9 months ago

1.3k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2k
Carousel

Juraj

1 year ago

3.2k
Nice and simple carousel
Nice and simple carousel, fully responsive.

dev cheick

2 years ago

4.5k
Custom Carosel

Md. Tofayel islam

2 years ago

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

Brandon D

4 years ago

33.5k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Hielke Brandsma

1 year ago

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

Maxim

2 years ago

14.2k
3D Animated Image Gallery
3D Animated Image Gallery

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

2 years ago

9.9k
Galerie Interactive
Galerie Interactive

Omer fils ELENGA

8 months ago

471