nexlide 1.0.0 → 1.0.1
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 +16 -11
- package/package.json +63 -63
package/README.md
CHANGED
|
@@ -85,17 +85,22 @@ export default function MyPage() {
|
|
|
85
85
|
|
|
86
86
|
## Available Animations
|
|
87
87
|
|
|
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
|
-
|
|
88
|
+
Use `animation` for the image slide transition and `captionAnimation` for the title + description appearance.
|
|
89
|
+
|
|
90
|
+
| Value | Image Slide Effect | Caption Effect |
|
|
91
|
+
|--------------|---------------------------------------------------------|---------------------------------------------------------|
|
|
92
|
+
| `bounce` | Bounces in from below with elastic easing | Bounces in from below with playful elastic effect |
|
|
93
|
+
| `fade` | Smooth fade in / fade out | Smooth fade in / fade out |
|
|
94
|
+
| `fadeIn` | Fade in only (no exit fade) | Fade in only (no exit fade) |
|
|
95
|
+
| `flip` | Flips in like a card turning (horizontal axis) | Flips in like a card turning (horizontal axis) |
|
|
96
|
+
| `slideLeft` | Enters from right, exits to left | Enters from right, exits to left |
|
|
97
|
+
| `slideRight` | Enters from left, exits to right | Enters from left, exits to right |
|
|
98
|
+
| `slideTop` | Enters from bottom, exits to top | Enters from bottom, exits to top |
|
|
99
|
+
| `slideBottom`| Enters from top, exits to bottom | Enters from top, exits to bottom |
|
|
100
|
+
| `zoomIn` | Zooms in from small to full size | Zooms in from small to full size |
|
|
101
|
+
| `zoomOut` | Zooms out from large to normal size | Zooms out from large to normal size |
|
|
102
|
+
|
|
103
|
+
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
104
|
|
|
100
105
|
## Props
|
|
101
106
|
|
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.1",
|
|
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
|
+
}
|