@jorgemadrid/open-carousel 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -6
- package/dist/index.cjs +1 -2553
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -2505
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# open-carousel
|
|
2
2
|
|
|
3
|
+
**40KB ESM** • **229 Tests** ✅ • **Zero Dependencies**
|
|
4
|
+
|
|
3
5
|
A high-performance, infinite-scroll React carousel with smooth animations, teleportation, and zero dependencies (except React).
|
|
4
6
|
|
|
5
7
|
## Features
|
|
@@ -11,19 +13,21 @@ A high-performance, infinite-scroll React carousel with smooth animations, telep
|
|
|
11
13
|
- 📏 **Responsive** - CSS variable-based responsive widths
|
|
12
14
|
- 🎨 **Visual Effects** - Scale, opacity, and shadow effects based on position
|
|
13
15
|
- 💾 **Persistence** - Optional scroll position persistence across navigation
|
|
16
|
+
- ⏳ **Loading States** - Built-in support for skeletons and resource caching
|
|
17
|
+
- 🏁 **Scroll Completion** - Precise detection using native `scrollend` or fallbacks
|
|
14
18
|
- 🐛 **Debug Tools** - Built-in logging system for development
|
|
15
19
|
|
|
16
20
|
## Installation
|
|
17
21
|
|
|
18
22
|
```bash
|
|
19
|
-
npm install open-carousel
|
|
23
|
+
npm install @jorgemadrid/open-carousel
|
|
20
24
|
```
|
|
21
25
|
|
|
22
26
|
## Quick Start
|
|
23
27
|
|
|
24
28
|
```tsx
|
|
25
|
-
import { Carousel } from 'open-carousel'
|
|
26
|
-
import 'open-carousel/styles.css'
|
|
29
|
+
import { Carousel } from '@jorgemadrid/open-carousel'
|
|
30
|
+
import '@jorgemadrid/open-carousel/styles.css'
|
|
27
31
|
|
|
28
32
|
const items = [
|
|
29
33
|
{ id: '1', title: 'First Item' },
|
|
@@ -56,9 +60,9 @@ function MyCarousel() {
|
|
|
56
60
|
| `renderItem` | `(item: T, index: number, helpers) => ReactNode` | required | Item renderer |
|
|
57
61
|
| `infinite` | `boolean` | `false` | Enable infinite scrolling |
|
|
58
62
|
| `itemWidthCssVar` | `string` | - | **Recommended**: Custom CSS variable for width |
|
|
59
|
-
| `
|
|
63
|
+
| `itemClassName` | `string` | - | Additional class name for item wrapper |
|
|
60
64
|
| `initialIndex` | `number` | `0` | Start at specific index |
|
|
61
|
-
| `gap` | `number` |
|
|
65
|
+
| `gap` | `number` | 16/12px | Gap between items (desktop/mobile) |
|
|
62
66
|
| `snap` | `boolean` | `true` | Enable CSS scroll snapping |
|
|
63
67
|
| `snapType` | `'mandatory' \| 'proximity'` | `'mandatory'` | Snap behavior type |
|
|
64
68
|
| `disableOpacityEffect` | `boolean` | `false` | Disable opacity fade on edges |
|
|
@@ -68,8 +72,10 @@ function MyCarousel() {
|
|
|
68
72
|
| `onActiveItemChange` | `(item: T) => void` | - | Callback when active item changes |
|
|
69
73
|
| `onEndReached` | `() => void` | - | Callback when scrolling to end |
|
|
70
74
|
| `hasNextPage` | `boolean` | `false` | Whether more items can be loaded |
|
|
75
|
+
| `eagerSelectionOnMobile` | `boolean` | `false` | Snappier selection (30% threshold) on mobile |
|
|
71
76
|
| `prevLabel` | `string` | `'Previous'` | Aria label for previous button |
|
|
72
77
|
| `nextLabel` | `string` | `'Next'` | Aria label for next button |
|
|
78
|
+
| `debug` | `object` | - | Debug configuration (channels, bufferSize) |
|
|
73
79
|
|
|
74
80
|
## 📏 Responsive Item Widths (Recommended)
|
|
75
81
|
|
|
@@ -113,7 +119,9 @@ import {
|
|
|
113
119
|
useCarouselVisuals,
|
|
114
120
|
useCarouselPersistence,
|
|
115
121
|
useDraggableScroll,
|
|
116
|
-
|
|
122
|
+
useLoadingState,
|
|
123
|
+
useScrollCompletion,
|
|
124
|
+
} from '@jorgemadrid/open-carousel'
|
|
117
125
|
```
|
|
118
126
|
|
|
119
127
|
### Debugging
|