reelkitReelKit

Початок роботи

reelkit — це слайдер по одному елементу — на екрані видно один елемент, як у TikTok, Instagram Reels чи Stories. Ідеально для вертикальних відеострічок, повноекранних галерей і вмісту, який гортають свайпом.

0.x.x — Unstable API

ReelKit активно розробляється. Поки версія 0.x.x, API може змінюватися між мінорними випусками без періоду застарівання. Фіксуйте версію, щоб нічого не зламалося несподівано.

Оберіть свій фреймворк

Спробувати онлайн

Спробуйте просто в браузері, без встановлення:

Швидкий старт

Мінімальний вертикальний слайдер на React:

tsx

Швидкий старт

Мінімальний вертикальний слайдер на Angular:

typescript

Швидкий старт

Мінімальний вертикальний слайдер на Vue:

vue

Ключові поняття

Reel

Компонент Reel — головний контейнер: він тримає стан слайдера, обробляє дотикові жести, навігацію з клавіатури та анімації. Для рендерингу слайдів використовує патерн render prop через itemBuilder .

itemBuilder

Пропс itemBuilder — функція, яка отримує індекс і повертає вміст слайда. Саме цей патерн дає віртуалізацію: рендеряться лише видимі елементи.

ReelIndicator

Необов’язковий компонент, що показує індикатори прогресу в стилі Instagram із поточною позицією в слайдері.

tsx
html
vue-html

Навігація

Вбудовані способи навігації:

  • Дотик / свайп: Тягніть, щоб гортати — з інерцією та прилипанням
  • Клавіатура: Стрілки (оверлейні компоненти ще обробляють Escape для закриття)
  • Колесо миші: Увімкніть enableWheel у пропсах
  • Програмно: Використовуйте apiRef для next(), prev(), goTo()
tsx
html
vue

Наступні кроки