ImageCarousel Component Demo

New Slot-Based Usage

The ImageCarousel component now uses Astro slots instead of a JSON array. This makes it much more flexible and easier to use.

Demo image 1

Demo image 2

Demo image 3

Demo image 4

Usage Example

<ImageCarousel alt="My carousel" class="rounded-xl shadow-2xl">
  <Image 
    src=[object Object] 
    alt="Image 1"
    width=800
    height=600
    class="w-full h-full object-cover rounded-lg"
  />
  <Image 
    src=[object Object] 
    alt="Image 2"
    width=800
    height=600
    class="w-full h-full object-cover rounded-lg"
  />
</ImageCarousel>

Benefits

✅ More flexible - you can add any content to slides, not just images
✅ Better performance - no need to pass large arrays as props
✅ Cleaner syntax - more intuitive and readable
✅ Type-safe - Astro handles the slot content properly
✅ Extensible - easy to add custom slide content