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

317

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

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

9 months ago

1.8k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

8 months ago

1.5k
carousel

Author:
Crimson

1 year ago

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

Author:
dev cheick

1 year ago

4k
Slider
Responsive slider

Author:
Abhiraj

1 year ago

2.4k
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

1 month ago

126
PlayStore Style Carousel
PlayStore Style Carousel

Author:
Omer fils ELENGA

1 month ago

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

Author:
Nick Girga

10 months ago

1.2k
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
responsive slider carousel
slider carousel

Author:
Abhiraj

1 year ago

2.3k
Carousel

Author:
Crimson

1 year ago

6.8k
card section neon
card section neon

Author:
Omer fils ELENGA

3 weeks ago

167

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components