Image Carousel

Bildergalerie mit Navigation und Auto-Play.

Component HTML

<div class="max-w-4xl mx-auto">
  <h2 class="text-2xl font-bold text-gray-900 mb-6">{{title}}</h2>

  <div
    data-island="image-carousel"
    data-island-props='{"images": {{images}}, "autoplay": {{autoplay}}}'
  >
    <!-- Carousel Island rendert hier -->
  </div>
</div>

Island Code

// islands/image-carousel.js
export default class ImageCarouselIsland {
  constructor(element, props = {}) {
    this.element = element;
    this.images = props.images || [];
    this.autoplay = props.autoplay;
    this.currentIndex = 0;
    this.intervalId = null;
    this.init();
  }

  init() {
    this.render();
    this.attachEvents();
    if (this.autoplay) this.startAutoplay();
  }

  render() {
    const img = this.images[this.currentIndex];
    this.element.innerHTML = `
      <div class="relative bg-gray-100 rounded-lg overflow-hidden">
        <img src="${img.url}" alt="${img.alt}" class="w-full h-96 object-cover" />

        <button class="prev absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
          ←
        </button>
        <button class="next absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
          →
        </button>

        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
          ${this.images.map((_, i) => `
            <button class="dot w-2 h-2 rounded-full ${i === this.currentIndex ? 'bg-white' : 'bg-white/50'}"></button>
          `).join('')}
        </div>
      </div>
    `;
  }

  attachEvents() {
    this.element.querySelector('.prev').addEventListener('click', () => this.prev());
    this.element.querySelector('.next').addEventListener('click', () => this.next());

    this.element.querySelectorAll('.dot').forEach((dot, i) => {
      dot.addEventListener('click', () => this.goTo(i));
    });
  }

  prev() {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    this.render();
    this.attachEvents();
  }

  next() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
    this.render();
    this.attachEvents();
  }

  goTo(index) {
    this.currentIndex = index;
    this.render();
    this.attachEvents();
  }

  startAutoplay() {
    this.intervalId = setInterval(() => this.next(), 3000);
  }

  destroy() {
    if (this.intervalId) clearInterval(this.intervalId);
  }
}

<!-- islands/image-carousel.svelte -->
<script>
  import { onMount, onDestroy } from 'svelte';

  let { images = [], autoplay = true } = $props();

  let currentIndex = $state(0);
  let intervalId;

  function prev() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
  }

  function next() {
    currentIndex = (currentIndex + 1) % images.length;
  }

  onMount(() => {
    if (autoplay) {
      intervalId = setInterval(next, 3000);
    }
  });

  onDestroy(() => {
    if (intervalId) clearInterval(intervalId);
  });
</script>

<div class="relative bg-gray-100 rounded-lg overflow-hidden">
  <img src={images[currentIndex].url} alt={images[currentIndex].alt} class="w-full h-96 object-cover" />

  <button onclick={prev} class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
    ←
  </button>
  <button onclick={next} class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
    →
  </button>

  <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
    {#each images as _, i}
      <button
        onclick={() => currentIndex = i}
        class="w-2 h-2 rounded-full {i === currentIndex ? 'bg-white' : 'bg-white/50'}"
      ></button>
    {/each}
  </div>
</div>

// islands/image-carousel.jsx
import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

function ImageCarouselComponent({ images = [], autoplay = true }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (!autoplay) return;

    const intervalId = setInterval(() => {
      setCurrentIndex(i => (i + 1) % images.length);
    }, 3000);

    return () => clearInterval(intervalId);
  }, [autoplay, images.length]);

  const prev = () => setCurrentIndex(i => (i - 1 + images.length) % images.length);
  const next = () => setCurrentIndex(i => (i + 1) % images.length);

  return (
    <div className="relative bg-gray-100 rounded-lg overflow-hidden">
      <img src={images[currentIndex].url} alt={images[currentIndex].alt} className="w-full h-96 object-cover" />

      <button onClick={prev} className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
        ←
      </button>
      <button onClick={next} className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
        →
      </button>

      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
        {images.map((_, i) => (
          <button
            key={i}
            onClick={() => setCurrentIndex(i)}
            className={`w-2 h-2 rounded-full ${i === currentIndex ? 'bg-white' : 'bg-white/50'}`}
          />
        ))}
      </div>
    </div>
  );
}

export default class ImageCarouselIsland {
  constructor(element, props = {}) {
    this.root = createRoot(element);
    this.root.render(<ImageCarouselComponent {...props} />);
  }

  destroy() {
    this.root?.unmount();
  }
}

// islands/image-carousel.jsx
import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import { render } from 'preact';

function ImageCarouselComponent({ images = [], autoplay = true }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (!autoplay) return;

    const intervalId = setInterval(() => {
      setCurrentIndex(i => (i + 1) % images.length);
    }, 3000);

    return () => clearInterval(intervalId);
  }, [autoplay, images.length]);

  const prev = () => setCurrentIndex(i => (i - 1 + images.length) % images.length);
  const next = () => setCurrentIndex(i => (i + 1) % images.length);

  return (
    <div class="relative bg-gray-100 rounded-lg overflow-hidden">
      <img src={images[currentIndex].url} alt={images[currentIndex].alt} class="w-full h-96 object-cover" />

      <button onClick={prev} class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
        ←
      </button>
      <button onClick={next} class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
        →
      </button>

      <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
        {images.map((_, i) => (
          <button
            key={i}
            onClick={() => setCurrentIndex(i)}
            class={`w-2 h-2 rounded-full ${i === currentIndex ? 'bg-white' : 'bg-white/50'}`}
          />
        ))}
      </div>
    </div>
  );
}

export default class ImageCarouselIsland {
  constructor(element, props = {}) {
    this.element = element;
    render(<ImageCarouselComponent {...props} />, element);
  }

  destroy() {
    render(null, this.element);
  }
}

// islands/image-carousel.js
import { createApp } from 'vue';

const ImageCarouselComponent = {
  props: {
    images: Array,
    autoplay: Boolean
  },
  data() {
    return {
      currentIndex: 0,
      intervalId: null
    };
  },
  mounted() {
    if (this.autoplay) {
      this.intervalId = setInterval(() => {
        this.next();
      }, 3000);
    }
  },
  beforeUnmount() {
    if (this.intervalId) clearInterval(this.intervalId);
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }
  },
  template: `
    <div class="relative bg-gray-100 rounded-lg overflow-hidden">
      <img :src="images[currentIndex].url" :alt="images[currentIndex].alt" class="w-full h-96 object-cover" />

      <button @click="prev" class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
        ←
      </button>
      <button @click="next" class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
        →
      </button>

      <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
        <button
          v-for="(_, i) in images"
          :key="i"
          @click="currentIndex = i"
          :class="['w-2 h-2 rounded-full', i === currentIndex ? 'bg-white' : 'bg-white/50']"
        ></button>
      </div>
    </div>
  `
};

export default class ImageCarouselIsland {
  constructor(element, props = {}) {
    this.app = createApp(ImageCarouselComponent, props);
    this.app.mount(element);
  }

  destroy() {
    this.app?.unmount();
  }
}

// islands/image-carousel.js
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

@customElement('image-carousel-component')
class ImageCarouselComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;

  @property({ type: Array })
  images = [];

  @property({ type: Boolean })
  autoplay = true;

  @state()
  currentIndex = 0;

  intervalId = null;

  connectedCallback() {
    super.connectedCallback();
    if (this.autoplay) {
      this.intervalId = setInterval(() => {
        this.next();
      }, 3000);
    }
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    if (this.intervalId) clearInterval(this.intervalId);
  }

  prev() {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
  }

  next() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
  }

  goTo(index) {
    this.currentIndex = index;
  }

  render() {
    const currentImage = this.images[this.currentIndex];

    return html`
      <div class="relative bg-gray-100 rounded-lg overflow-hidden">
        <img src="${currentImage?.url}" alt="${currentImage?.alt}" class="w-full h-96 object-cover" />

        <button @click=${this.prev} class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
          ←
        </button>
        <button @click=${this.next} class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70">
          →
        </button>

        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
          ${this.images.map((_, i) => html`
            <button
              @click=${() => this.goTo(i)}
              class="w-2 h-2 rounded-full ${i === this.currentIndex ? 'bg-white' : 'bg-white/50'}"
            ></button>
          `)}
        </div>
      </div>
    `;
  }
}

export default class ImageCarouselIsland {
  constructor(element, props = {}) {
    const component = document.createElement('image-carousel-component');
    component.images = props.images || [];
    component.autoplay = props.autoplay;
    element.appendChild(component);
    this.element = element;
  }

  destroy() {
    this.element.innerHTML = '';
  }
}

// islands/image-carousel.js
export default class ImageCarouselIsland {
  constructor(element, props = {}) {
    const images = JSON.stringify(props.images || []);

    element.innerHTML = `
      <div
        x-data="{
          images: ${images},
          currentIndex: 0,
          autoplay: ${props.autoplay || false},
          intervalId: null,

          init() {
            if (this.autoplay) {
              this.intervalId = setInterval(() => {
                this.next();
              }, 3000);
            }
          },

          prev() {
            this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
          },

          next() {
            this.currentIndex = (this.currentIndex + 1) % this.images.length;
          },

          goTo(index) {
            this.currentIndex = index;
          }
        }"
        x-init="init()"
      >
        <div class="relative bg-gray-100 rounded-lg overflow-hidden">
          <img
            :src="images[currentIndex].url"
            :alt="images[currentIndex].alt"
            class="w-full h-96 object-cover"
          />

          <button
            @click="prev"
            class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70"
          >
            ←
          </button>
          <button
            @click="next"
            class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70"
          >
            →
          </button>

          <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
            <template x-for="(img, i) in images" :key="i">
              <button
                @click="goTo(i)"
                :class="'w-2 h-2 rounded-full ' + (i === currentIndex ? 'bg-white' : 'bg-white/50')"
              ></button>
            </template>
          </div>
        </div>
      </div>
    `;
  }

  destroy() {
    // Alpine cleanup happens automatically
  }
}

Was du lernst

• Intervals: Auto-Play mit setInterval/clearInterval
• Lifecycle: Setup und Cleanup von Timers
• Array Navigation: Zirkuläre Navigation durch Listen
• Event Handling: Multiple Buttons (prev, next, dots)