@reelkit/angular

Angular bindings for @reelkit/core. Add a <rk-reel> component with a count and a template — it handles virtualization, gestures, and keyboard/wheel input. ~14.0 kB gzip.

Live Demo · Open in StackBlitz

Installation

npm install @reelkit/angular

Quick Start

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

@Component({
  standalone: true,
  imports: [ReelComponent, ReelIndicatorComponent, RkReelItemDirective],
  template: `
    <rk-reel
      [count]="items.length"
      style="width: 100%; height: 100dvh"
      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;color:#fff"
        >
          {{ items[i].title }}
        </div>
      </ng-template>
      <rk-reel-indicator direction="vertical" />
    </rk-reel>
  `,
})
export class AppComponent {
  items = [
    { title: 'Slide 1', color: '#6366f1' },
    { title: 'Slide 2', color: '#8b5cf6' },
    { title: 'Slide 3', color: '#ec4899' },
  ];
}

Features

• <rk-reel> — virtualized slider, keeps only 3 slides in the DOM
• <rk-reel-indicator> — dot indicators that auto-connect to the parent via context
• rkReelItem structural directive for slide templates
• Measures its own size via ResizeObserver — no explicit dimensions needed
• Swipe with momentum and snap, keyboard arrows, mouse wheel
• Loop mode for infinite circular scrolling
• ChangeDetectionStrategy.OnPush by default
• Typed with TypeScript

API

rk-reel Inputs

| Input | Type | Default | Description | | --------------------- | ---------------------------- | ------------ | ----------------------------- | | count | number | required | Number of slides | | direction | 'horizontal' \| 'vertical' | 'vertical' | Slide direction | | size | [number, number] | - | Explicit [width, height] | | initialIndex | number | 0 | Starting slide index | | loop | boolean | false | Enable infinite loop | | swipeDistanceFactor | number | 0.12 | Swipe threshold (0-1) | | transitionDuration | number | 300 | Animation duration in ms | | enableNavKeys | boolean | true | Enable keyboard navigation | | enableWheel | boolean | false | Enable mouse wheel navigation | | wheelDebounceMs | number | 200 | Wheel debounce duration |

rk-reel Outputs

| Output | Type | Description | | ---------------- | ------------------------------------------- | ------------------------- | | afterChange | { index: number; indexInRange: number } | Fired after slide change | | beforeChange | { index: number; nextIndex: number; ... } | Fired before slide change | | apiReady | ReelApi | Emits the imperative API | | slideDragStart | number | Drag gesture started | | slideDragEnd | number | Drag gesture ended |

rkReelItem Template Context

| Variable | Type | Description | | -------------- | ------------------ | ------------------------------------- | | $implicit | number | Absolute slide index (0 to count - 1) | | indexInRange | number | Position in visible window (0, 1, 2) | | size | [number, number] | Container [width, height] |

ReelIndicator Inputs

| Input | Type | Default | Description | | ----------- | -------- | ------- | ------------------------------ | | direction | string | - | 'horizontal' or 'vertical' | | radius | number | 3 | Dot radius in pixels | | visible | number | 3 | Number of visible dots | | gap | number | 4 | Gap between dots in pixels |

Documentation

API reference, demos, and guides at reelkit.dev.

Support

If ReelKit saved you some time, a star on GitHub would mean a lot — it's a small thing, but it really helps the project get noticed.

License

MIT