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

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

8 months ago

814
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
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.5k
Carousel

Juraj

1 year ago

3.2k
Image carousel
Uses Flowbite

Anonymous

1 year ago

3.6k
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)

Juraj

1 year ago

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

Juraj

8 months ago

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

Ayyamperumal S

8 months ago

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

Maxim

2 years ago

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

dev cheick

2 years ago

4.5k
carousel

Crimson

1 year ago

3.5k