nexlide 1.0.0 → 1.0.2
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 +37 -21
- package/package.json +63 -63
package/README.md
CHANGED
|
@@ -1,7 +1,28 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/nexlide)
|
|
4
|
+
[](https://www.npmjs.com/package/nexlide)
|
|
5
|
+
[](https://github.com/ERPalmer/nexlide)
|
|
6
|
+
[](https://www.typescriptlang.org/)
|
|
7
|
+
[](https://tailwindcss.com/)
|
|
8
|
+
[](https://www.framer.com/motion/)
|
|
9
|
+
|
|
10
|
+
|
|
1
11
|
# Nexlide
|
|
2
12
|
|
|
3
13
|
A modern, lightweight, and fully customizable React carousel component built with **Framer Motion** for smooth animations and **Tailwind CSS** for flexible styling.
|
|
4
14
|
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- Smooth slide transitions (fade, slide left/right/top/bottom)
|
|
18
|
+
- Independent caption animations (title + description)
|
|
19
|
+
- Responsive design
|
|
20
|
+
- Lazy loading images
|
|
21
|
+
- ARIA accessible
|
|
22
|
+
- Dark mode compatible
|
|
23
|
+
- No external CSS import required (uses Tailwind classes inline)
|
|
24
|
+
- Others in development process
|
|
25
|
+
|
|
5
26
|
## Supports
|
|
6
27
|
|
|
7
28
|
- Autoplay with configurable interval
|
|
@@ -13,16 +34,6 @@ A modern, lightweight, and fully customizable React carousel component built wit
|
|
|
13
34
|
- Fully customizable styles via className props
|
|
14
35
|
- Designed for seamless integration with **Next.js** (App Router) and any React project
|
|
15
36
|
|
|
16
|
-
## Features
|
|
17
|
-
|
|
18
|
-
- Smooth slide transitions (fade, slide left/right/top/bottom)
|
|
19
|
-
- Independent caption animations (title + description)
|
|
20
|
-
- Responsive design
|
|
21
|
-
- Lazy loading images
|
|
22
|
-
- ARIA accessible
|
|
23
|
-
- Dark mode compatible
|
|
24
|
-
- No external CSS import required (uses Tailwind classes inline)
|
|
25
|
-
|
|
26
37
|
## Installation
|
|
27
38
|
|
|
28
39
|
```bash
|
|
@@ -85,17 +96,22 @@ export default function MyPage() {
|
|
|
85
96
|
|
|
86
97
|
## Available Animations
|
|
87
98
|
|
|
88
|
-
Use `animation` for image slide transition and `captionAnimation` for title
|
|
89
|
-
|
|
90
|
-
| Value | Image Slide Effect
|
|
91
|
-
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
|
|
99
|
+
Use `animation` for the image slide transition and `captionAnimation` for the title + description appearance.
|
|
100
|
+
|
|
101
|
+
| Value | Image Slide Effect | Caption Effect |
|
|
102
|
+
|--------------|---------------------------------------------------------|---------------------------------------------------------|
|
|
103
|
+
| `bounce` | Bounces in from below with elastic easing | Bounces in from below with playful elastic effect |
|
|
104
|
+
| `fade` | Smooth fade in / fade out | Smooth fade in / fade out |
|
|
105
|
+
| `fadeIn` | Fade in only (no exit fade) | Fade in only (no exit fade) |
|
|
106
|
+
| `flip` | Flips in like a card turning (horizontal axis) | Flips in like a card turning (horizontal axis) |
|
|
107
|
+
| `slideLeft` | Enters from right, exits to left | Enters from right, exits to left |
|
|
108
|
+
| `slideRight` | Enters from left, exits to right | Enters from left, exits to right |
|
|
109
|
+
| `slideTop` | Enters from bottom, exits to top | Enters from bottom, exits to top |
|
|
110
|
+
| `slideBottom`| Enters from top, exits to bottom | Enters from top, exits to bottom |
|
|
111
|
+
| `zoomIn` | Zooms in from small to full size | Zooms in from small to full size |
|
|
112
|
+
| `zoomOut` | Zooms out from large to normal size | Zooms out from large to normal size |
|
|
113
|
+
|
|
114
|
+
All animations use smooth easing curves and can be combined freely (e.g., slideLeft for image + bounce for caption). Adjust timing with `captionDelay` prop if needed.
|
|
99
115
|
|
|
100
116
|
## Props
|
|
101
117
|
|
package/package.json
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "nexlide",
|
|
3
|
-
"description": "Nexlide is a modern, lightweight, and fully customizable React carousel component built with Framer Motion for smooth animations and Tailwind CSS for flexible styling.",
|
|
4
|
-
"version": "1.0.
|
|
5
|
-
"author": "Nexlide Team",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"private": false,
|
|
8
|
-
"keywords": [
|
|
9
|
-
"react",
|
|
10
|
-
"carousel",
|
|
11
|
-
"nextjs",
|
|
12
|
-
"tailwindcss",
|
|
13
|
-
"framer-motion",
|
|
14
|
-
"image-carousel",
|
|
15
|
-
"react-component"
|
|
16
|
-
],
|
|
17
|
-
"homepage": "https://
|
|
18
|
-
"repository": {
|
|
19
|
-
"type": "git",
|
|
20
|
-
"url": "git+https://github.com/ERPalmer/nexlide.git"
|
|
21
|
-
},
|
|
22
|
-
"bugs": {
|
|
23
|
-
"url": "https://github.com/ERPalmer/nexlide/issues"
|
|
24
|
-
},
|
|
25
|
-
"main": "dist/index.js",
|
|
26
|
-
"module": "dist/index.esm.js",
|
|
27
|
-
"types": "dist/index.d.ts",
|
|
28
|
-
"files": [
|
|
29
|
-
"dist"
|
|
30
|
-
],
|
|
31
|
-
"scripts": {
|
|
32
|
-
"build": "rollup -c rollup.config.mjs",
|
|
33
|
-
"prepublishOnly": "npm run build"
|
|
34
|
-
},
|
|
35
|
-
"publishConfig": {
|
|
36
|
-
"access": "public"
|
|
37
|
-
},
|
|
38
|
-
"peerDependencies": {
|
|
39
|
-
"class-variance-authority": "^0.7.0",
|
|
40
|
-
"clsx": "^2.1.0",
|
|
41
|
-
"framer-motion": "^11.0.0 || ^12.0.0",
|
|
42
|
-
"react": "^18.0.0 || ^19.0.0-rc",
|
|
43
|
-
"react-dom": "^18.0.0 || ^19.0.0-rc",
|
|
44
|
-
"tailwind-merge": "^2.0.0"
|
|
45
|
-
},
|
|
46
|
-
"dependencies": {
|
|
47
|
-
"class-variance-authority": "^0.7.0",
|
|
48
|
-
"clsx": "^2.1.0",
|
|
49
|
-
"framer-motion": "^11.0.0 || ^12.0.0",
|
|
50
|
-
"tailwind-merge": "^2.0.0"
|
|
51
|
-
},
|
|
52
|
-
"devDependencies": {
|
|
53
|
-
"@rollup/plugin-commonjs": "^28.0.0",
|
|
54
|
-
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
55
|
-
"@rollup/plugin-typescript": "^12.1.0",
|
|
56
|
-
"@types/react": "^18.3.11",
|
|
57
|
-
"@types/react-dom": "^18.3.1",
|
|
58
|
-
"rollup": "^4.24.0",
|
|
59
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
60
|
-
"tslib": "^2.7.0",
|
|
61
|
-
"typescript": "^5.6.3"
|
|
62
|
-
}
|
|
63
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "nexlide",
|
|
3
|
+
"description": "Nexlide is a modern, lightweight, and fully customizable React carousel component built with Framer Motion for smooth animations and Tailwind CSS for flexible styling.",
|
|
4
|
+
"version": "1.0.2",
|
|
5
|
+
"author": "Nexlide Team",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"private": false,
|
|
8
|
+
"keywords": [
|
|
9
|
+
"react",
|
|
10
|
+
"carousel",
|
|
11
|
+
"nextjs",
|
|
12
|
+
"tailwindcss",
|
|
13
|
+
"framer-motion",
|
|
14
|
+
"image-carousel",
|
|
15
|
+
"react-component"
|
|
16
|
+
],
|
|
17
|
+
"homepage": "https://nexlide.netlify.app/",
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "git",
|
|
20
|
+
"url": "git+https://github.com/ERPalmer/nexlide.git"
|
|
21
|
+
},
|
|
22
|
+
"bugs": {
|
|
23
|
+
"url": "https://github.com/ERPalmer/nexlide/issues"
|
|
24
|
+
},
|
|
25
|
+
"main": "dist/index.js",
|
|
26
|
+
"module": "dist/index.esm.js",
|
|
27
|
+
"types": "dist/index.d.ts",
|
|
28
|
+
"files": [
|
|
29
|
+
"dist"
|
|
30
|
+
],
|
|
31
|
+
"scripts": {
|
|
32
|
+
"build": "rollup -c rollup.config.mjs",
|
|
33
|
+
"prepublishOnly": "npm run build"
|
|
34
|
+
},
|
|
35
|
+
"publishConfig": {
|
|
36
|
+
"access": "public"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"class-variance-authority": "^0.7.0",
|
|
40
|
+
"clsx": "^2.1.0",
|
|
41
|
+
"framer-motion": "^11.0.0 || ^12.0.0",
|
|
42
|
+
"react": "^18.0.0 || ^19.0.0-rc",
|
|
43
|
+
"react-dom": "^18.0.0 || ^19.0.0-rc",
|
|
44
|
+
"tailwind-merge": "^2.0.0"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"class-variance-authority": "^0.7.0",
|
|
48
|
+
"clsx": "^2.1.0",
|
|
49
|
+
"framer-motion": "^11.0.0 || ^12.0.0",
|
|
50
|
+
"tailwind-merge": "^2.0.0"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@rollup/plugin-commonjs": "^28.0.0",
|
|
54
|
+
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
55
|
+
"@rollup/plugin-typescript": "^12.1.0",
|
|
56
|
+
"@types/react": "^18.3.11",
|
|
57
|
+
"@types/react-dom": "^18.3.1",
|
|
58
|
+
"rollup": "^4.24.0",
|
|
59
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
60
|
+
"tslib": "^2.7.0",
|
|
61
|
+
"typescript": "^5.6.3"
|
|
62
|
+
}
|
|
63
|
+
}
|