nexlide 1.0.2 → 1.0.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 +29 -16
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +19 -19
package/README.md
CHANGED
|
@@ -1,18 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://nexlide.netlify.app/assets/logo-full.png" width="420"/>
|
|
3
|
+
</p>
|
|
2
4
|
|
|
3
|
-
|
|
4
|
-
[](https://github.com/ERPalmer/nexlide)
|
|
7
|
+
[](https://www.npmjs.com/package/nexlide)
|
|
8
|
+
[](https://www.npmjs.com/package/nexlide)
|
|
9
|
+
[](https://nextjs.org/)
|
|
10
|
+
[](https://react.dev/)
|
|
11
|
+
[](https://www.typescriptlang.org/)
|
|
12
|
+
[](https://tailwindcss.com/)
|
|
13
|
+
[](https://www.framer.com/motion/)
|
|
9
14
|
|
|
10
15
|
|
|
11
16
|
# Nexlide
|
|
12
17
|
|
|
13
18
|
A modern, lightweight, and fully customizable React carousel component built with **Framer Motion** for smooth animations and **Tailwind CSS** for flexible styling.
|
|
14
19
|
|
|
15
|
-
|
|
20
|
+
|
|
21
|
+
## ✨ Features
|
|
16
22
|
|
|
17
23
|
- Smooth slide transitions (fade, slide left/right/top/bottom)
|
|
18
24
|
- Independent caption animations (title + description)
|
|
@@ -23,7 +29,8 @@ A modern, lightweight, and fully customizable React carousel component built wit
|
|
|
23
29
|
- No external CSS import required (uses Tailwind classes inline)
|
|
24
30
|
- Others in development process
|
|
25
31
|
|
|
26
|
-
|
|
32
|
+
|
|
33
|
+
## 🧩 Supports
|
|
27
34
|
|
|
28
35
|
- Autoplay with configurable interval
|
|
29
36
|
- Infinite loop
|
|
@@ -34,7 +41,8 @@ A modern, lightweight, and fully customizable React carousel component built wit
|
|
|
34
41
|
- Fully customizable styles via className props
|
|
35
42
|
- Designed for seamless integration with **Next.js** (App Router) and any React project
|
|
36
43
|
|
|
37
|
-
|
|
44
|
+
|
|
45
|
+
## ⚙️ Installation
|
|
38
46
|
|
|
39
47
|
```bash
|
|
40
48
|
npm install nexlide
|
|
@@ -44,7 +52,8 @@ yarn add nexlide
|
|
|
44
52
|
pnpm add nexlide
|
|
45
53
|
```
|
|
46
54
|
|
|
47
|
-
|
|
55
|
+
|
|
56
|
+
## 📦 Peer Dependencies
|
|
48
57
|
|
|
49
58
|
These dependencies are usually already present in React/Next.js projects:
|
|
50
59
|
|
|
@@ -52,7 +61,8 @@ These dependencies are usually already present in React/Next.js projects:
|
|
|
52
61
|
- framer-motion
|
|
53
62
|
- clsx, tailwind-merge, class-variance-authority
|
|
54
63
|
|
|
55
|
-
|
|
64
|
+
|
|
65
|
+
## 🚀 Usage (Next.js App Router)
|
|
56
66
|
|
|
57
67
|
The component is a **Client Component** — you **must** use it inside a file that starts with `'use client';`
|
|
58
68
|
|
|
@@ -94,7 +104,8 @@ export default function MyPage() {
|
|
|
94
104
|
}
|
|
95
105
|
```
|
|
96
106
|
|
|
97
|
-
|
|
107
|
+
|
|
108
|
+
## 🌀 Available Animations
|
|
98
109
|
|
|
99
110
|
Use `animation` for the image slide transition and `captionAnimation` for the title + description appearance.
|
|
100
111
|
|
|
@@ -113,7 +124,8 @@ Use `animation` for the image slide transition and `captionAnimation` for the ti
|
|
|
113
124
|
|
|
114
125
|
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.
|
|
115
126
|
|
|
116
|
-
|
|
127
|
+
|
|
128
|
+
## 🔧 Props
|
|
117
129
|
|
|
118
130
|
| Prop | Type | Default | Description |
|
|
119
131
|
|---------------------|----------------------------------------------------------------------|---------------|-----------------------------------------------------------------------------|
|
|
@@ -134,7 +146,7 @@ All animations use smooth easing curves and can be combined freely (e.g., slideL
|
|
|
134
146
|
`captionDelay` | `number` | `0.5` | Custom delay time in seconds |
|
|
135
147
|
|
|
136
148
|
|
|
137
|
-
## Development
|
|
149
|
+
## 🛠️ Development
|
|
138
150
|
|
|
139
151
|
```bash
|
|
140
152
|
# Clone repo
|
|
@@ -152,6 +164,7 @@ npm pack
|
|
|
152
164
|
# Then in your test project: npm install ../nexlide/nexlide-1.0.0.tgz
|
|
153
165
|
```
|
|
154
166
|
|
|
155
|
-
|
|
167
|
+
|
|
168
|
+
## 📄 License
|
|
156
169
|
|
|
157
170
|
MIT License. See LICENSE for details.
|
package/dist/index.esm.js
CHANGED
|
@@ -97,11 +97,11 @@ function Carousel({ items, autoPlay = false, autoPlayInterval = 3000, showPagina
|
|
|
97
97
|
};
|
|
98
98
|
if (items.length === 0)
|
|
99
99
|
return null;
|
|
100
|
-
return (jsxs("div", { className: cn("relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900", className), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, role: "region", "aria-label": "
|
|
100
|
+
return (jsxs("div", { className: cn("relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900", className), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, role: "region", "aria-label": "Carousel imageshowcase", children: [jsx(AnimatePresence, { initial: false, mode: "wait", children: jsxs(motion.div, { className: cn("absolute inset-0", slideClassName), variants: (_a = slideVariants[animation]) !== null && _a !== void 0 ? _a : slideVariants.slideLeft, initial: "initial", animate: "animate", exit: "exit", children: [jsx("img", { src: items[currentIndex].imageUrl, alt: items[currentIndex].title || `Slide ${currentIndex + 1}`, "aria-label": items[currentIndex].title || `Slide ${currentIndex + 1}`, className: "w-full h-full object-cover", loading: "lazy" }), jsx(AnimatePresence, { children: jsxs(motion.div, { className: cn("absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl", captionClassName), variants: (_b = slideVariants[captionAnimation]) !== null && _b !== void 0 ? _b : slideVariants.fade, initial: "initial", animate: "animate", exit: "exit", transition: {
|
|
101
101
|
delay: captionDelay,
|
|
102
102
|
duration: 0.7,
|
|
103
103
|
ease: "easeOut",
|
|
104
|
-
}, children: [jsx("h3", { className: "text-2xl font-bold text-white drop-shadow-md", children: items[currentIndex].title }), jsx("p", { className: "mt-2 text-white/90 text-lg drop-shadow-sm", children: items[currentIndex].description })] }, currentIndex) })] }, currentIndex) }), showArrows && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { onClick: prev, className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Previous", children: "\u2039" }), jsx("button", { onClick: next, className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Next", children: "\u203A" })] })), showPagination && items.length > 1 && (jsx("div", { className: cn("absolute bottom-
|
|
104
|
+
}, children: [jsx("h3", { className: "text-2xl font-bold text-white drop-shadow-md", children: items[currentIndex].title }), jsx("p", { className: "mt-2 text-white/90 text-lg drop-shadow-sm", children: items[currentIndex].description })] }, currentIndex) })] }, currentIndex) }), showArrows && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { onClick: prev, className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Previous slide", children: "\u2039" }), jsx("button", { onClick: next, className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Next slide", children: "\u203A" })] })), showPagination && items.length > 1 && (jsx("div", { className: cn("absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-3", paginationClassName), children: items.map((_, idx) => (jsx("button", { onClick: () => goToIndex(idx), className: cn("w-3 h-3 rounded-full transition-all duration-300 shadow-md hover:cursor-pointer", idx === currentIndex
|
|
105
105
|
? "bg-white scale-125 shadow-white/50"
|
|
106
106
|
: "bg-white/50 hover:bg-white/80", dotClassName), "aria-label": `Go to slide ${idx + 1}` }, idx))) }))] }));
|
|
107
107
|
}
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../src/lib/animations.ts","../src/lib/utils.ts","../src/Carousel.tsx"],"sourcesContent":["import { Variants } from \"framer-motion\";\r\n\r\nexport const slideVariants: Record<string, Variants> = {\r\n fade: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6, ease: \"easeInOut\" } },\r\n exit: { opacity: 0 },\r\n },\r\n fadeIn: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6 } },\r\n exit: { opacity: 0 },\r\n },\r\n slideLeft: {\r\n initial: { opacity: 0, x: \"100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"-100%\" },\r\n },\r\n slideRight: {\r\n initial: { opacity: 0, x: \"-100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"100%\" },\r\n },\r\n slideTop: {\r\n initial: { opacity: 0, y: \"-100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"100%\" },\r\n },\r\n slideBottom: {\r\n initial: { opacity: 0, y: \"100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"-100%\" },\r\n },\r\n bounce: {\r\n initial: { opacity: 0, y: 40, scale: 0.9 },\r\n animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.7, ease: [0.68, -0.55, 0.265, 1.55] } }, // bounce fuerte\r\n exit: { opacity: 0, y: -40, scale: 0.9 },\r\n },\r\n zoomIn: {\r\n initial: { opacity: 0, scale: 0.7 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 0.7 },\r\n },\r\n zoomOut: {\r\n initial: { opacity: 0, scale: 1.3 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 1.3 },\r\n },\r\n flip: {\r\n initial: { opacity: 0, rotateY: 90 },\r\n animate: { opacity: 1, rotateY: 0, transition: { duration: 0.7, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, rotateY: -90 },\r\n },\r\n};","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { slideVariants } from \"./lib/animations\";\r\nimport { cn } from \"./lib/utils\";\r\n\r\ninterface CarouselItem {\r\n imageUrl: string;\r\n title: string;\r\n description: string;\r\n}\r\n\r\ninterface CarouselProps {\r\n items: CarouselItem[];\r\n autoPlay?: boolean;\r\n autoPlayInterval?: number;\r\n showPagination?: boolean;\r\n showArrows?: boolean;\r\n infiniteLoop?: boolean;\r\n className?: string;\r\n slideClassName?: string;\r\n captionClassName?: string;\r\n arrowClassName?: string;\r\n paginationClassName?: string;\r\n dotClassName?: string;\r\n animation?: keyof typeof slideVariants;\r\n captionAnimation?: keyof typeof slideVariants;\r\n captionDelay?: number;\r\n}\r\n\r\nexport default function Carousel({\r\n items,\r\n autoPlay = false,\r\n autoPlayInterval = 3000,\r\n showPagination = true,\r\n showArrows = true,\r\n infiniteLoop = true,\r\n className,\r\n slideClassName,\r\n captionClassName,\r\n arrowClassName,\r\n paginationClassName,\r\n dotClassName,\r\n animation = \"slideLeft\",\r\n captionAnimation = \"fade\",\r\n captionDelay = 0.5,\r\n}: CarouselProps) {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const touchStartX = useRef(0);\r\n\r\n const goToIndex = (index: number) => {\r\n let newIndex = index;\r\n if (infiniteLoop) {\r\n newIndex = (index + items.length) % items.length;\r\n } else {\r\n newIndex = Math.max(0, Math.min(index, items.length - 1));\r\n }\r\n setCurrentIndex(newIndex);\r\n };\r\n\r\n const next = () => goToIndex(currentIndex + 1);\r\n const prev = () => goToIndex(currentIndex - 1);\r\n\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n const interval = setInterval(next, autoPlayInterval);\r\n return () => clearInterval(interval);\r\n }, [currentIndex, autoPlay, autoPlayInterval]);\r\n\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n touchStartX.current = e.touches[0].clientX;\r\n };\r\n\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const diff = touchStartX.current - e.touches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) next();\r\n else prev();\r\n }\r\n };\r\n\r\n if (items.length === 0) return null;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900\",\r\n className\r\n )}\r\n onTouchStart={handleTouchStart}\r\n onTouchMove={handleTouchMove}\r\n role=\"region\"\r\n aria-label=\"Image carousel\"\r\n >\r\n <AnimatePresence initial={false} mode=\"wait\">\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\"absolute inset-0\", slideClassName)}\r\n variants={slideVariants[animation] ?? slideVariants.slideLeft}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n >\r\n <img\r\n src={items[currentIndex].imageUrl}\r\n alt={items[currentIndex].title || \"Carousel image\"}\r\n className=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n />\r\n <AnimatePresence>\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\r\n \"absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl\",\r\n captionClassName\r\n )}\r\n variants={slideVariants[captionAnimation] ?? slideVariants.fade}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n transition={{\r\n delay: captionDelay,\r\n duration: 0.7,\r\n ease: \"easeOut\",\r\n }}\r\n >\r\n <h3 className=\"text-2xl font-bold text-white drop-shadow-md\">\r\n {items[currentIndex].title}\r\n </h3>\r\n <p className=\"mt-2 text-white/90 text-lg drop-shadow-sm\">\r\n {items[currentIndex].description}\r\n </p>\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </AnimatePresence>\r\n\r\n {showArrows && items.length > 1 && (\r\n <>\r\n <button\r\n onClick={prev}\r\n className={cn(\r\n \"absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Previous\"\r\n >\r\n ‹\r\n </button>\r\n\r\n <button\r\n onClick={next}\r\n className={cn(\r\n \"absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Next\"\r\n >\r\n ›\r\n </button>\r\n </>\r\n )}\r\n\r\n {showPagination && items.length > 1 && (\r\n <div\r\n className={cn(\r\n \"absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-3\",\r\n paginationClassName\r\n )}\r\n >\r\n {items.map((_, idx) => (\r\n <button\r\n key={idx}\r\n onClick={() => goToIndex(idx)}\r\n className={cn(\r\n \"w-3 h-3 rounded-full transition-all duration-300 shadow-md\",\r\n idx === currentIndex\r\n ? \"bg-white scale-125 shadow-white/50\"\r\n : \"bg-white/50 hover:bg-white/80\",\r\n dotClassName\r\n )}\r\n aria-label={`Go to slide ${idx + 1}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/lib/animations.ts","../src/lib/utils.ts","../src/Carousel.tsx"],"sourcesContent":["import { Variants } from \"framer-motion\";\r\n\r\nexport const slideVariants: Record<string, Variants> = {\r\n fade: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6, ease: \"easeInOut\" } },\r\n exit: { opacity: 0 },\r\n },\r\n fadeIn: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6 } },\r\n exit: { opacity: 0 },\r\n },\r\n slideLeft: {\r\n initial: { opacity: 0, x: \"100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"-100%\" },\r\n },\r\n slideRight: {\r\n initial: { opacity: 0, x: \"-100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"100%\" },\r\n },\r\n slideTop: {\r\n initial: { opacity: 0, y: \"-100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"100%\" },\r\n },\r\n slideBottom: {\r\n initial: { opacity: 0, y: \"100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"-100%\" },\r\n },\r\n bounce: {\r\n initial: { opacity: 0, y: 40, scale: 0.9 },\r\n animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.7, ease: [0.68, -0.55, 0.265, 1.55] } }, // bounce fuerte\r\n exit: { opacity: 0, y: -40, scale: 0.9 },\r\n },\r\n zoomIn: {\r\n initial: { opacity: 0, scale: 0.7 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 0.7 },\r\n },\r\n zoomOut: {\r\n initial: { opacity: 0, scale: 1.3 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 1.3 },\r\n },\r\n flip: {\r\n initial: { opacity: 0, rotateY: 90 },\r\n animate: { opacity: 1, rotateY: 0, transition: { duration: 0.7, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, rotateY: -90 },\r\n },\r\n};","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { slideVariants } from \"./lib/animations\";\r\nimport { cn } from \"./lib/utils\";\r\n\r\ninterface CarouselItem {\r\n imageUrl: string;\r\n title: string;\r\n description: string;\r\n}\r\n\r\ninterface CarouselProps {\r\n items: CarouselItem[];\r\n autoPlay?: boolean;\r\n autoPlayInterval?: number;\r\n showPagination?: boolean;\r\n showArrows?: boolean;\r\n infiniteLoop?: boolean;\r\n className?: string;\r\n slideClassName?: string;\r\n captionClassName?: string;\r\n arrowClassName?: string;\r\n paginationClassName?: string;\r\n dotClassName?: string;\r\n animation?: keyof typeof slideVariants;\r\n captionAnimation?: keyof typeof slideVariants;\r\n captionDelay?: number;\r\n}\r\n\r\nexport default function Carousel({\r\n items,\r\n autoPlay = false,\r\n autoPlayInterval = 3000,\r\n showPagination = true,\r\n showArrows = true,\r\n infiniteLoop = true,\r\n className,\r\n slideClassName,\r\n captionClassName,\r\n arrowClassName,\r\n paginationClassName,\r\n dotClassName,\r\n animation = \"slideLeft\",\r\n captionAnimation = \"fade\",\r\n captionDelay = 0.5,\r\n}: CarouselProps) {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const touchStartX = useRef(0);\r\n\r\n const goToIndex = (index: number) => {\r\n let newIndex = index;\r\n if (infiniteLoop) {\r\n newIndex = (index + items.length) % items.length;\r\n } else {\r\n newIndex = Math.max(0, Math.min(index, items.length - 1));\r\n }\r\n setCurrentIndex(newIndex);\r\n };\r\n\r\n const next = () => goToIndex(currentIndex + 1);\r\n const prev = () => goToIndex(currentIndex - 1);\r\n\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n const interval = setInterval(next, autoPlayInterval);\r\n return () => clearInterval(interval);\r\n }, [currentIndex, autoPlay, autoPlayInterval]);\r\n\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n touchStartX.current = e.touches[0].clientX;\r\n };\r\n\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const diff = touchStartX.current - e.touches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) next();\r\n else prev();\r\n }\r\n };\r\n\r\n if (items.length === 0) return null;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900\",\r\n className\r\n )}\r\n onTouchStart={handleTouchStart}\r\n onTouchMove={handleTouchMove}\r\n role=\"region\"\r\n aria-label=\"Carousel imageshowcase\"\r\n >\r\n <AnimatePresence initial={false} mode=\"wait\">\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\"absolute inset-0\", slideClassName)}\r\n variants={slideVariants[animation] ?? slideVariants.slideLeft}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n >\r\n <img\r\n src={items[currentIndex].imageUrl}\r\n alt={items[currentIndex].title || `Slide ${currentIndex + 1}`}\r\n aria-label={items[currentIndex].title || `Slide ${currentIndex + 1}`}\r\n className=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n />\r\n <AnimatePresence>\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\r\n \"absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl\",\r\n captionClassName\r\n )}\r\n variants={slideVariants[captionAnimation] ?? slideVariants.fade}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n transition={{\r\n delay: captionDelay,\r\n duration: 0.7,\r\n ease: \"easeOut\",\r\n }}\r\n >\r\n <h3 className=\"text-2xl font-bold text-white drop-shadow-md\">\r\n {items[currentIndex].title}\r\n </h3>\r\n <p className=\"mt-2 text-white/90 text-lg drop-shadow-sm\">\r\n {items[currentIndex].description}\r\n </p>\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </AnimatePresence>\r\n\r\n {showArrows && items.length > 1 && (\r\n <>\r\n <button\r\n onClick={prev}\r\n className={cn(\r\n \"absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Previous slide\"\r\n >\r\n ‹\r\n </button>\r\n\r\n <button\r\n onClick={next}\r\n className={cn(\r\n \"absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Next slide\"\r\n >\r\n ›\r\n </button>\r\n </>\r\n )}\r\n\r\n {showPagination && items.length > 1 && (\r\n <div\r\n className={cn(\r\n \"absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-3\",\r\n paginationClassName\r\n )}\r\n >\r\n {items.map((_, idx) => (\r\n <button\r\n key={idx}\r\n onClick={() => goToIndex(idx)}\r\n className={cn(\r\n \"w-3 h-3 rounded-full transition-all duration-300 shadow-md hover:cursor-pointer\",\r\n idx === currentIndex\r\n ? \"bg-white scale-125 shadow-white/50\"\r\n : \"bg-white/50 hover:bg-white/80\",\r\n dotClassName\r\n )}\r\n aria-label={`Go to slide ${idx + 1}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -99,11 +99,11 @@ function Carousel({ items, autoPlay = false, autoPlayInterval = 3000, showPagina
|
|
|
99
99
|
};
|
|
100
100
|
if (items.length === 0)
|
|
101
101
|
return null;
|
|
102
|
-
return (jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900", className), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, role: "region", "aria-label": "
|
|
102
|
+
return (jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900", className), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, role: "region", "aria-label": "Carousel imageshowcase", children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, mode: "wait", children: jsxRuntime.jsxs(framerMotion.motion.div, { className: cn("absolute inset-0", slideClassName), variants: (_a = slideVariants[animation]) !== null && _a !== void 0 ? _a : slideVariants.slideLeft, initial: "initial", animate: "animate", exit: "exit", children: [jsxRuntime.jsx("img", { src: items[currentIndex].imageUrl, alt: items[currentIndex].title || `Slide ${currentIndex + 1}`, "aria-label": items[currentIndex].title || `Slide ${currentIndex + 1}`, className: "w-full h-full object-cover", loading: "lazy" }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: jsxRuntime.jsxs(framerMotion.motion.div, { className: cn("absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl", captionClassName), variants: (_b = slideVariants[captionAnimation]) !== null && _b !== void 0 ? _b : slideVariants.fade, initial: "initial", animate: "animate", exit: "exit", transition: {
|
|
103
103
|
delay: captionDelay,
|
|
104
104
|
duration: 0.7,
|
|
105
105
|
ease: "easeOut",
|
|
106
|
-
}, children: [jsxRuntime.jsx("h3", { className: "text-2xl font-bold text-white drop-shadow-md", children: items[currentIndex].title }), jsxRuntime.jsx("p", { className: "mt-2 text-white/90 text-lg drop-shadow-sm", children: items[currentIndex].description })] }, currentIndex) })] }, currentIndex) }), showArrows && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { onClick: prev, className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Previous", children: "\u2039" }), jsxRuntime.jsx("button", { onClick: next, className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Next", children: "\u203A" })] })), showPagination && items.length > 1 && (jsxRuntime.jsx("div", { className: cn("absolute bottom-
|
|
106
|
+
}, children: [jsxRuntime.jsx("h3", { className: "text-2xl font-bold text-white drop-shadow-md", children: items[currentIndex].title }), jsxRuntime.jsx("p", { className: "mt-2 text-white/90 text-lg drop-shadow-sm", children: items[currentIndex].description })] }, currentIndex) })] }, currentIndex) }), showArrows && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { onClick: prev, className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Previous slide", children: "\u2039" }), jsxRuntime.jsx("button", { onClick: next, className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Next slide", children: "\u203A" })] })), showPagination && items.length > 1 && (jsxRuntime.jsx("div", { className: cn("absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-3", paginationClassName), children: items.map((_, idx) => (jsxRuntime.jsx("button", { onClick: () => goToIndex(idx), className: cn("w-3 h-3 rounded-full transition-all duration-300 shadow-md hover:cursor-pointer", idx === currentIndex
|
|
107
107
|
? "bg-white scale-125 shadow-white/50"
|
|
108
108
|
: "bg-white/50 hover:bg-white/80", dotClassName), "aria-label": `Go to slide ${idx + 1}` }, idx))) }))] }));
|
|
109
109
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/lib/animations.ts","../src/lib/utils.ts","../src/Carousel.tsx"],"sourcesContent":["import { Variants } from \"framer-motion\";\r\n\r\nexport const slideVariants: Record<string, Variants> = {\r\n fade: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6, ease: \"easeInOut\" } },\r\n exit: { opacity: 0 },\r\n },\r\n fadeIn: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6 } },\r\n exit: { opacity: 0 },\r\n },\r\n slideLeft: {\r\n initial: { opacity: 0, x: \"100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"-100%\" },\r\n },\r\n slideRight: {\r\n initial: { opacity: 0, x: \"-100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"100%\" },\r\n },\r\n slideTop: {\r\n initial: { opacity: 0, y: \"-100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"100%\" },\r\n },\r\n slideBottom: {\r\n initial: { opacity: 0, y: \"100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"-100%\" },\r\n },\r\n bounce: {\r\n initial: { opacity: 0, y: 40, scale: 0.9 },\r\n animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.7, ease: [0.68, -0.55, 0.265, 1.55] } }, // bounce fuerte\r\n exit: { opacity: 0, y: -40, scale: 0.9 },\r\n },\r\n zoomIn: {\r\n initial: { opacity: 0, scale: 0.7 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 0.7 },\r\n },\r\n zoomOut: {\r\n initial: { opacity: 0, scale: 1.3 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 1.3 },\r\n },\r\n flip: {\r\n initial: { opacity: 0, rotateY: 90 },\r\n animate: { opacity: 1, rotateY: 0, transition: { duration: 0.7, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, rotateY: -90 },\r\n },\r\n};","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { slideVariants } from \"./lib/animations\";\r\nimport { cn } from \"./lib/utils\";\r\n\r\ninterface CarouselItem {\r\n imageUrl: string;\r\n title: string;\r\n description: string;\r\n}\r\n\r\ninterface CarouselProps {\r\n items: CarouselItem[];\r\n autoPlay?: boolean;\r\n autoPlayInterval?: number;\r\n showPagination?: boolean;\r\n showArrows?: boolean;\r\n infiniteLoop?: boolean;\r\n className?: string;\r\n slideClassName?: string;\r\n captionClassName?: string;\r\n arrowClassName?: string;\r\n paginationClassName?: string;\r\n dotClassName?: string;\r\n animation?: keyof typeof slideVariants;\r\n captionAnimation?: keyof typeof slideVariants;\r\n captionDelay?: number;\r\n}\r\n\r\nexport default function Carousel({\r\n items,\r\n autoPlay = false,\r\n autoPlayInterval = 3000,\r\n showPagination = true,\r\n showArrows = true,\r\n infiniteLoop = true,\r\n className,\r\n slideClassName,\r\n captionClassName,\r\n arrowClassName,\r\n paginationClassName,\r\n dotClassName,\r\n animation = \"slideLeft\",\r\n captionAnimation = \"fade\",\r\n captionDelay = 0.5,\r\n}: CarouselProps) {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const touchStartX = useRef(0);\r\n\r\n const goToIndex = (index: number) => {\r\n let newIndex = index;\r\n if (infiniteLoop) {\r\n newIndex = (index + items.length) % items.length;\r\n } else {\r\n newIndex = Math.max(0, Math.min(index, items.length - 1));\r\n }\r\n setCurrentIndex(newIndex);\r\n };\r\n\r\n const next = () => goToIndex(currentIndex + 1);\r\n const prev = () => goToIndex(currentIndex - 1);\r\n\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n const interval = setInterval(next, autoPlayInterval);\r\n return () => clearInterval(interval);\r\n }, [currentIndex, autoPlay, autoPlayInterval]);\r\n\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n touchStartX.current = e.touches[0].clientX;\r\n };\r\n\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const diff = touchStartX.current - e.touches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) next();\r\n else prev();\r\n }\r\n };\r\n\r\n if (items.length === 0) return null;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900\",\r\n className\r\n )}\r\n onTouchStart={handleTouchStart}\r\n onTouchMove={handleTouchMove}\r\n role=\"region\"\r\n aria-label=\"Image carousel\"\r\n >\r\n <AnimatePresence initial={false} mode=\"wait\">\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\"absolute inset-0\", slideClassName)}\r\n variants={slideVariants[animation] ?? slideVariants.slideLeft}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n >\r\n <img\r\n src={items[currentIndex].imageUrl}\r\n alt={items[currentIndex].title || \"Carousel image\"}\r\n className=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n />\r\n <AnimatePresence>\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\r\n \"absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl\",\r\n captionClassName\r\n )}\r\n variants={slideVariants[captionAnimation] ?? slideVariants.fade}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n transition={{\r\n delay: captionDelay,\r\n duration: 0.7,\r\n ease: \"easeOut\",\r\n }}\r\n >\r\n <h3 className=\"text-2xl font-bold text-white drop-shadow-md\">\r\n {items[currentIndex].title}\r\n </h3>\r\n <p className=\"mt-2 text-white/90 text-lg drop-shadow-sm\">\r\n {items[currentIndex].description}\r\n </p>\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </AnimatePresence>\r\n\r\n {showArrows && items.length > 1 && (\r\n <>\r\n <button\r\n onClick={prev}\r\n className={cn(\r\n \"absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Previous\"\r\n >\r\n ‹\r\n </button>\r\n\r\n <button\r\n onClick={next}\r\n className={cn(\r\n \"absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Next\"\r\n >\r\n ›\r\n </button>\r\n </>\r\n )}\r\n\r\n {showPagination && items.length > 1 && (\r\n <div\r\n className={cn(\r\n \"absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-3\",\r\n paginationClassName\r\n )}\r\n >\r\n {items.map((_, idx) => (\r\n <button\r\n key={idx}\r\n onClick={() => goToIndex(idx)}\r\n className={cn(\r\n \"w-3 h-3 rounded-full transition-all duration-300 shadow-md\",\r\n idx === currentIndex\r\n ? \"bg-white scale-125 shadow-white/50\"\r\n : \"bg-white/50 hover:bg-white/80\",\r\n dotClassName\r\n )}\r\n aria-label={`Go to slide ${idx + 1}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["twMerge","clsx","useState","useRef","useEffect","_jsxs","_jsx","AnimatePresence","motion","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/lib/animations.ts","../src/lib/utils.ts","../src/Carousel.tsx"],"sourcesContent":["import { Variants } from \"framer-motion\";\r\n\r\nexport const slideVariants: Record<string, Variants> = {\r\n fade: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6, ease: \"easeInOut\" } },\r\n exit: { opacity: 0 },\r\n },\r\n fadeIn: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6 } },\r\n exit: { opacity: 0 },\r\n },\r\n slideLeft: {\r\n initial: { opacity: 0, x: \"100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"-100%\" },\r\n },\r\n slideRight: {\r\n initial: { opacity: 0, x: \"-100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"100%\" },\r\n },\r\n slideTop: {\r\n initial: { opacity: 0, y: \"-100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"100%\" },\r\n },\r\n slideBottom: {\r\n initial: { opacity: 0, y: \"100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"-100%\" },\r\n },\r\n bounce: {\r\n initial: { opacity: 0, y: 40, scale: 0.9 },\r\n animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.7, ease: [0.68, -0.55, 0.265, 1.55] } }, // bounce fuerte\r\n exit: { opacity: 0, y: -40, scale: 0.9 },\r\n },\r\n zoomIn: {\r\n initial: { opacity: 0, scale: 0.7 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 0.7 },\r\n },\r\n zoomOut: {\r\n initial: { opacity: 0, scale: 1.3 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 1.3 },\r\n },\r\n flip: {\r\n initial: { opacity: 0, rotateY: 90 },\r\n animate: { opacity: 1, rotateY: 0, transition: { duration: 0.7, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, rotateY: -90 },\r\n },\r\n};","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { slideVariants } from \"./lib/animations\";\r\nimport { cn } from \"./lib/utils\";\r\n\r\ninterface CarouselItem {\r\n imageUrl: string;\r\n title: string;\r\n description: string;\r\n}\r\n\r\ninterface CarouselProps {\r\n items: CarouselItem[];\r\n autoPlay?: boolean;\r\n autoPlayInterval?: number;\r\n showPagination?: boolean;\r\n showArrows?: boolean;\r\n infiniteLoop?: boolean;\r\n className?: string;\r\n slideClassName?: string;\r\n captionClassName?: string;\r\n arrowClassName?: string;\r\n paginationClassName?: string;\r\n dotClassName?: string;\r\n animation?: keyof typeof slideVariants;\r\n captionAnimation?: keyof typeof slideVariants;\r\n captionDelay?: number;\r\n}\r\n\r\nexport default function Carousel({\r\n items,\r\n autoPlay = false,\r\n autoPlayInterval = 3000,\r\n showPagination = true,\r\n showArrows = true,\r\n infiniteLoop = true,\r\n className,\r\n slideClassName,\r\n captionClassName,\r\n arrowClassName,\r\n paginationClassName,\r\n dotClassName,\r\n animation = \"slideLeft\",\r\n captionAnimation = \"fade\",\r\n captionDelay = 0.5,\r\n}: CarouselProps) {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const touchStartX = useRef(0);\r\n\r\n const goToIndex = (index: number) => {\r\n let newIndex = index;\r\n if (infiniteLoop) {\r\n newIndex = (index + items.length) % items.length;\r\n } else {\r\n newIndex = Math.max(0, Math.min(index, items.length - 1));\r\n }\r\n setCurrentIndex(newIndex);\r\n };\r\n\r\n const next = () => goToIndex(currentIndex + 1);\r\n const prev = () => goToIndex(currentIndex - 1);\r\n\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n const interval = setInterval(next, autoPlayInterval);\r\n return () => clearInterval(interval);\r\n }, [currentIndex, autoPlay, autoPlayInterval]);\r\n\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n touchStartX.current = e.touches[0].clientX;\r\n };\r\n\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const diff = touchStartX.current - e.touches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) next();\r\n else prev();\r\n }\r\n };\r\n\r\n if (items.length === 0) return null;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900\",\r\n className\r\n )}\r\n onTouchStart={handleTouchStart}\r\n onTouchMove={handleTouchMove}\r\n role=\"region\"\r\n aria-label=\"Carousel imageshowcase\"\r\n >\r\n <AnimatePresence initial={false} mode=\"wait\">\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\"absolute inset-0\", slideClassName)}\r\n variants={slideVariants[animation] ?? slideVariants.slideLeft}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n >\r\n <img\r\n src={items[currentIndex].imageUrl}\r\n alt={items[currentIndex].title || `Slide ${currentIndex + 1}`}\r\n aria-label={items[currentIndex].title || `Slide ${currentIndex + 1}`}\r\n className=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n />\r\n <AnimatePresence>\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\r\n \"absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl\",\r\n captionClassName\r\n )}\r\n variants={slideVariants[captionAnimation] ?? slideVariants.fade}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n transition={{\r\n delay: captionDelay,\r\n duration: 0.7,\r\n ease: \"easeOut\",\r\n }}\r\n >\r\n <h3 className=\"text-2xl font-bold text-white drop-shadow-md\">\r\n {items[currentIndex].title}\r\n </h3>\r\n <p className=\"mt-2 text-white/90 text-lg drop-shadow-sm\">\r\n {items[currentIndex].description}\r\n </p>\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </AnimatePresence>\r\n\r\n {showArrows && items.length > 1 && (\r\n <>\r\n <button\r\n onClick={prev}\r\n className={cn(\r\n \"absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Previous slide\"\r\n >\r\n ‹\r\n </button>\r\n\r\n <button\r\n onClick={next}\r\n className={cn(\r\n \"absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Next slide\"\r\n >\r\n ›\r\n </button>\r\n </>\r\n )}\r\n\r\n {showPagination && items.length > 1 && (\r\n <div\r\n className={cn(\r\n \"absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-3\",\r\n paginationClassName\r\n )}\r\n >\r\n {items.map((_, idx) => (\r\n <button\r\n key={idx}\r\n onClick={() => goToIndex(idx)}\r\n className={cn(\r\n \"w-3 h-3 rounded-full transition-all duration-300 shadow-md hover:cursor-pointer\",\r\n idx === currentIndex\r\n ? \"bg-white scale-125 shadow-white/50\"\r\n : \"bg-white/50 hover:bg-white/80\",\r\n dotClassName\r\n )}\r\n aria-label={`Go to slide ${idx + 1}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["twMerge","clsx","useState","useRef","useEffect","_jsxs","_jsx","AnimatePresence","motion","_Fragment"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nexlide",
|
|
3
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.
|
|
4
|
+
"version": "1.0.4",
|
|
5
5
|
"author": "Nexlide Team",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"private": false,
|
|
@@ -36,28 +36,28 @@
|
|
|
36
36
|
"access": "public"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
|
-
"class-variance-authority": "^0.7.
|
|
40
|
-
"clsx": "^2.1.
|
|
41
|
-
"framer-motion": "^
|
|
42
|
-
"react": "^
|
|
43
|
-
"react-dom": "^
|
|
44
|
-
"tailwind-merge": "^
|
|
39
|
+
"class-variance-authority": "^0.7.1",
|
|
40
|
+
"clsx": "^2.1.1",
|
|
41
|
+
"framer-motion": "^12.35.0",
|
|
42
|
+
"react": "^19.2.4",
|
|
43
|
+
"react-dom": "^19.2.4",
|
|
44
|
+
"tailwind-merge": "^3.5.0"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"class-variance-authority": "^0.7.
|
|
48
|
-
"clsx": "^2.1.
|
|
49
|
-
"framer-motion": "^
|
|
50
|
-
"tailwind-merge": "^
|
|
47
|
+
"class-variance-authority": "^0.7.1",
|
|
48
|
+
"clsx": "^2.1.1",
|
|
49
|
+
"framer-motion": "^12.35.0",
|
|
50
|
+
"tailwind-merge": "^3.5.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@rollup/plugin-commonjs": "^
|
|
54
|
-
"@rollup/plugin-node-resolve": "^
|
|
55
|
-
"@rollup/plugin-typescript": "^12.
|
|
56
|
-
"@types/react": "^
|
|
57
|
-
"@types/react-dom": "^
|
|
58
|
-
"rollup": "^4.
|
|
53
|
+
"@rollup/plugin-commonjs": "^29.0.1",
|
|
54
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
55
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
56
|
+
"@types/react": "^19.2.14",
|
|
57
|
+
"@types/react-dom": "^19.2.3",
|
|
58
|
+
"rollup": "^4.59.0",
|
|
59
59
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
60
|
-
"tslib": "^2.
|
|
61
|
-
"typescript": "^5.
|
|
60
|
+
"tslib": "^2.8.1",
|
|
61
|
+
"typescript": "^5.9.3"
|
|
62
62
|
}
|
|
63
63
|
}
|