reelkitReelKit

Core Guide

The @reelkit/core package provides the framework-agnostic slider logic. Use it to build custom integrations or understand the underlying architecture.

Architecture Overview

The core uses a controller pattern with factory functions. No classes — all plain objects returned from closures. Zero dependencies. The core coordinates:

  • SliderController — central state management and navigation
  • GestureController — touch/pointer drag handling
  • KeyboardController — arrow keys and Escape
  • WheelController — mouse wheel with debounce

createSliderController

Creates a new slider controller instance that manages all slider state and behavior.

typescript

Controller Methods

Navigation

typescript

Lifecycle

typescript

State Updates

typescript

Virtualization

The core renders only 3 slides to DOM at any time (current, previous, next). The range extractor determines which indices are included in the rendered window:

typescript
The result is always clamped to a maximum of 3 indices. If your extractor returns more, the core keeps 3 centered around the current slide.

Signals

The core uses a lightweight signal system for reactivity:

typescript

Controller State

Access reactive state through controller.state:

typescript

Timeline Controller

Build a custom scrub bar for any <video> element. The controller exposes reactive signals for duration, current time, buffered ranges, and scrubbing state, and wires pointer plus keyboard interactions onto any DOM element in one call.

typescript

Next Steps