reelkitReelKit

Erste Schritte

reelkit ist ein Single-Item-Slider: Es ist immer genau ein Element zu sehen, wie bei TikTok, Instagram Reels oder Stories. Ideal für vertikale Video-Feeds, Vollbild-Galerien und wischbare Inhalte.

Gefällt dir ReelKit?

Wenn dir ReelKit nützt, gib dem Projekt doch einen Stern auf GitHub. Das hilft anderen Entwicklerinnen und Entwicklern, das Projekt zu finden, und hält es am Leben. Danke, ich freue mich wirklich über deine Unterstützung!

0.x.x — instabile API

ReelKit wird aktiv weiterentwickelt. Solange die Version 0.x.x ist, kann sich die API zwischen Minor-Versionen ohne Übergangsfrist ändern. Lege deine Version fest, damit dein Projekt nicht unerwartet bricht.

Framework auswählen

Online ausprobieren

Probier es im Browser aus, ganz ohne Installation:

Schnellstart

Ein minimaler vertikaler Slider mit React:

tsx
import { Reel, ReelIndicator } from '@reelkit/react';

const items = [
  { id: 1, title: 'Slide 1', color: '#6366f1' },
  { id: 2, title: 'Slide 2', color: '#8b5cf6' },
  { id: 3, title: 'Slide 3', color: '#ec4899' },
];

function App() {
  return (
    <Reel
      count={items.length}
      size={[400, 600]}
      direction="vertical"
      enableWheel
      itemBuilder={(index) => (
        <div
          style={{
            width: '100%',
            height: '100%',
            background: items[index].color,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '2rem',
            color: 'white',
          }}
        >
          {items[index].title}
        </div>
      )}
    >
      <ReelIndicator />
    </Reel>
  );
}

Schnellstart

Ein minimaler vertikaler Slider mit Angular:

typescript
import { Component } from '@angular/core';
import {
  ReelComponent,
  ReelIndicatorComponent,
  RkReelItemDirective,
} from '@reelkit/angular';

const items = [
  { id: 1, title: 'Slide 1', color: '#6366f1' },
  { id: 2, title: 'Slide 2', color: '#8b5cf6' },
  { id: 3, title: 'Slide 3', color: '#ec4899' },
];

@Component({
  standalone: true,
  imports: [ReelComponent, ReelIndicatorComponent, RkReelItemDirective],
  template: `
    <rk-reel [count]="items.length" [size]="[400, 600]"
             direction="vertical" [enableWheel]="true">
      <ng-template rkReelItem let-i let-size="size">
        <div [style.width.px]="size[0]" [style.height.px]="size[1]"
             [style.background]="items[i].color"
             style="display:flex;align-items:center;justify-content:center;
                    font-size:2rem;color:#fff">
          {{ items[i].title }}
        </div>
      </ng-template>
      <rk-reel-indicator />
    </rk-reel>
  `,
})
export class AppComponent {
  readonly items = items;
}

Schnellstart

Ein minimaler vertikaler Slider mit Vue:

vue
<script setup lang="ts">
import { Reel, ReelIndicator } from '@reelkit/vue';

const items = [
  { id: 1, title: 'Slide 1', color: '#6366f1' },
  { id: 2, title: 'Slide 2', color: '#8b5cf6' },
  { id: 3, title: 'Slide 3', color: '#ec4899' },
];
</script>

<template>
  <Reel
    :count="items.length"
    :size="[400, 600]"
    direction="vertical"
    enable-wheel
  >
    <template #item="{ index, size }">
      <div
        :style="{
          width: size[0] + 'px',
          height: size[1] + 'px',
          background: items[index].color,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '2rem',
          color: '#fff',
        }"
      >
        {{ items[index].title }}
      </div>
    </template>

    <ReelIndicator />
  </Reel>
</template>

Grundbegriffe

Reel

Die Komponente Reel ist der Hauptcontainer. Die Komponente verwaltet den Zustand des Sliders und kümmert sich um Touch-Gesten, Tastaturnavigation und Animationen. Die Slides rendert sie über das Render-Prop-Muster mit itemBuilder.

itemBuilder

Das Prop itemBuilder ist eine Funktion, die den Index erhält und den Inhalt des jeweiligen Slides zurückgibt. Dieses Muster ermöglicht die Virtualisierung: Gerendert werden nur die sichtbaren Elemente.

ReelIndicator

Optionale Komponente, die Fortschrittsanzeigen im Stil von Instagram zeigt und damit die aktuelle Position im Slider markiert.

tsx
import { Reel, ReelIndicator } from '@reelkit/react';

function App() {
  return (
    <Reel
      count={items.length}
      size={[400, 600]}
      itemBuilder={(index) => <Slide data={items[index]} />}
    >
      <ReelIndicator />
    </Reel>
  );
}
html
<rk-reel [count]="items.length" [size]="[400, 600]">
  <ng-template rkReelItem let-index>
    <app-slide [data]="items[index]" />
  </ng-template>
  <rk-reel-indicator />
</rk-reel>
vue-html
<Reel :count="items.length" :size="[400, 600]">
  <template #item="{ index }">
    <Slide :data="items[index]" />
  </template>
  <ReelIndicator />
</Reel>

Eingebaute Navigationsarten:

  • Touch/Wischen: Ziehen zum Navigieren, mit Schwung und Einrasten
  • Tastatur: Pfeiltasten (Overlay-Komponenten schließen zusätzlich mit Escape)
  • Mausrad: Aktivierst du mit dem Prop enableWheel
  • Programmatisch: Über apiRef mit next(), prev(), goTo()
tsx
import { useRef } from 'react';
import { Reel, type ReelApi } from '@reelkit/react';

function App() {
  const apiRef = useRef<ReelApi>(null);

  return (
    <>
      <Reel
        count={10}
        size={[400, 600]}
        apiRef={apiRef}
        itemBuilder={(index) => <Slide index={index} />}
      />
      <button onClick={() => apiRef.current?.prev()}>Prev</button>
      <button onClick={() => apiRef.current?.next()}>Next</button>
      <button onClick={() => apiRef.current?.goTo(5)}>Go to 5</button>
    </>
  );
}
html
<rk-reel
  [count]="10"
  [size]="[400, 600]"
  (apiReady)="reelApi = $event"
>
  <ng-template rkReelItem let-index>
    <app-slide [index]="index" />
  </ng-template>
</rk-reel>

<button (click)="reelApi?.prev()">Prev</button>
<button (click)="reelApi?.next()">Next</button>
<button (click)="reelApi?.goTo(5)">Go to 5</button>
vue
<script setup lang="ts">
import { ref } from 'vue';
import { Reel, type ReelExpose } from '@reelkit/vue';

const reelRef = ref<InstanceType<typeof Reel> & ReelExpose>();
</script>

<template>
  <Reel ref="reelRef" :count="10" :size="[400, 600]">
    <template #item="{ index }">
      <Slide :index="index" />
    </template>
  </Reel>

  <button @click="reelRef?.prev()">Prev</button>
  <button @click="reelRef?.next()">Next</button>
  <button @click="reelRef?.goTo(5)">Go to 5</button>
</template>

Nächste Schritte