{"_id":"3d-whell-parallax-carousel","_rev":"4-3f3bbdbc26a3b991fdd46966483241cb","name":"3d-whell-parallax-carousel","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"3d-whell-parallax-carousel","version":"1.0.0","keywords":["carousel","parallax","3d","slider","react","vue","vanilla"],"author":{"name":"Nodirbek Xushbaxtov"},"license":"MIT","_id":"3d-whell-parallax-carousel@1.0.0","maintainers":[{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"}],"dist":{"shasum":"36a76927e8a73235f807aef78192d4295908157d","tarball":"https://registry.npmjs.org/3d-whell-parallax-carousel/-/3d-whell-parallax-carousel-1.0.0.tgz","fileCount":12,"integrity":"sha512-dt7MMQCq4JRLdNVkcVEswKZ5h4KUaQqZIW9XnKi2IyR27sRqYtgbQlyvzVHr8+roUI8msaPy5NYL1mvc02TO6A==","signatures":[{"sig":"MEQCIHzlLBB77uZNJZJ8rbWPmowzOuoe5MKXeUSvm0XSyDX7AiAOREjJde4Ut4QDRvB2BNflS86bXqNiAjtDkgWfBCYz6g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83208},"main":"./dist/index.cjs","type":"module","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./vue":{"import":"./dist/vue.js","require":"./dist/vue.cjs"},"./react":{"import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"c6dc6f10cd6149f0ddea30d0ff137132a3e24e29","scripts":{"dev":"rollup -c --watch","build":"rollup -c"},"_npmUser":{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"},"_npmVersion":"11.8.0","description":"Smooth 3D parallax carousel with trapezoid perspective effect. Works with Vanilla JS, React, and Vue.","directories":{},"_nodeVersion":"25.6.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.0.0","@babel/preset-react":"^7.0.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"vue":">=3.0.0","react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/3d-whell-parallax-carousel_1.0.0_1771394374993_0.16422698457305662","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"3d-whell-parallax-carousel","version":"1.0.1","keywords":["carousel","parallax","3d","slider","react","vue","vanilla"],"author":{"name":"Nodirbek Xushbaxtov"},"license":"MIT","_id":"3d-whell-parallax-carousel@1.0.1","maintainers":[{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"}],"dist":{"shasum":"9c1259d730a6eed664a0c1e14d136c558de2f97f","tarball":"https://registry.npmjs.org/3d-whell-parallax-carousel/-/3d-whell-parallax-carousel-1.0.1.tgz","fileCount":15,"integrity":"sha512-9MstHWp9ThygmaSL0AmZgcMhHGL91m1V3Y+x5gMeXJa87Tz+I0wewP6Qy+Ksh6SGy0Mm+rvr5bHSP8Ej+oW0EQ==","signatures":[{"sig":"MEQCIGWRJASsq9Oiy1wWoVj9ZcBUfCtXLt2W+Q22AjFocw85AiATnzw/S8rQVpwlNRgoeYJW3jAbIrDmr3CtnABFPoVFCQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":87226},"main":"./dist/index.cjs","type":"module","types":"./src/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./vue":{"types":"./src/vue.d.ts","import":"./dist/vue.js","require":"./dist/vue.cjs"},"./react":{"types":"./src/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"c6dc6f10cd6149f0ddea30d0ff137132a3e24e29","scripts":{"dev":"rollup -c --watch","build":"rollup -c"},"_npmUser":{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"},"_npmVersion":"11.8.0","description":"Smooth 3D parallax carousel with trapezoid perspective effect. Works with Vanilla JS, React, and Vue.","directories":{},"_nodeVersion":"25.6.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.0.0","@babel/preset-react":"^7.0.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"vue":">=3.0.0","react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/3d-whell-parallax-carousel_1.0.1_1771396088256_0.036218220737231244","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"3d-whell-parallax-carousel","version":"1.0.2","keywords":["carousel","parallax","3d","slider","react","vue","vanilla","typescript","3d-carousel","parallax-slider"],"author":{"name":"Nodirbek Xushbaxtov"},"license":"MIT","_id":"3d-whell-parallax-carousel@1.0.2","maintainers":[{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"}],"homepage":"https://github.com/nodirbek/3d-whell-parallax-carousel#readme","bugs":{"url":"https://github.com/nodirbek/3d-whell-parallax-carousel/issues"},"dist":{"shasum":"688df3bd6160f62ed5e0583dab000576593f27c4","tarball":"https://registry.npmjs.org/3d-whell-parallax-carousel/-/3d-whell-parallax-carousel-1.0.2.tgz","fileCount":22,"integrity":"sha512-VaOmlj2xFTrHXgd6+8j49Snt6M02mbaKV9BaIRHJlLoEMakm8D7LOPZAaGX+eJfQ8ZliOZEmwR7x/1oMTwVhbw==","signatures":[{"sig":"MEUCIQC0T5wx/FJU7NZXyEkkWVtI3sO5IgzIMhbUhQwiI4XUDAIgJjlTcA+cuiZkaJG1+507d1XFwCY2uFi2uCr9uGmYu38=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":278019},"main":"./dist/index.cjs","type":"module","types":"./src/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./vue":{"types":"./src/vue.d.ts","import":"./dist/vue.js","require":"./dist/vue.cjs"},"./react":{"types":"./src/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"6aa7a60af2b59d50135bd8b79d2ba861bb686697","scripts":{"dev":"rollup -c --watch","build":"rollup -c","typecheck":"tsc --noEmit"},"_npmUser":{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"},"repository":{"url":"git+https://github.com/nodirbek/3d-whell-parallax-carousel.git","type":"git"},"_npmVersion":"11.8.0","description":"Smooth 3D parallax carousel with trapezoid perspective effect. Works with Vanilla JS, React, and Vue.","directories":{},"_nodeVersion":"25.6.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.0.0","typescript":"^5.9.3","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@babel/preset-react":"^7.0.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"vue":">=3.0.0","react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/3d-whell-parallax-carousel_1.0.2_1771398440628_0.6402499821261969","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"3d-whell-parallax-carousel","version":"1.0.3","description":"Smooth 3D parallax carousel with trapezoid perspective effect. Works with Vanilla JS, React, and Vue.","keywords":["carousel","parallax","3d","slider","react","vue","vanilla","typescript","3d-carousel","parallax-slider"],"author":{"name":"Nodirbek Xushbaxtov"},"license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./src/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./src/index.d.ts"},"./react":{"import":"./dist/react.js","require":"./dist/react.cjs","types":"./src/react.d.ts"},"./vue":{"import":"./dist/vue.js","require":"./dist/vue.cjs","types":"./src/vue.d.ts"}},"scripts":{"build":"rollup -c","dev":"rollup -c --watch","typecheck":"tsc --noEmit"},"devDependencies":{"@babel/preset-react":"^7.0.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-node-resolve":"^15.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.4","typescript":"^5.9.3"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0","vue":">=3.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true},"vue":{"optional":true}},"repository":{"type":"git","url":"git+https://github.com/nodirbek/3d-whell-parallax-carousel.git"},"bugs":{"url":"https://github.com/nodirbek/3d-whell-parallax-carousel/issues"},"homepage":"https://github.com/nodirbek/3d-whell-parallax-carousel#readme","gitHead":"d2f59748115e38e0d44e22f53185b90a38e85ac6","_id":"3d-whell-parallax-carousel@1.0.3","_nodeVersion":"25.6.0","_npmVersion":"11.8.0","dist":{"integrity":"sha512-TL75QQorBQmUxzAAE0ixlfhzYYpblMOssZqj0X9qM1yDlProQw0USMrCdy8PqkLpk59drZQJ/3pil5PSNeaHhw==","shasum":"d720582cec19f0207b75b356132bca03d303277b","tarball":"https://registry.npmjs.org/3d-whell-parallax-carousel/-/3d-whell-parallax-carousel-1.0.3.tgz","fileCount":22,"unpackedSize":299369,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD6K2W4dzBHfZj4T+kkxCIh/k/zMtwC6RGArlS2aZ1UVgIgQgYhFWtwcYY8BkDiHq8HrD80JJtHWpO61EmsJS2rJ3o="}]},"_npmUser":{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"},"directories":{},"maintainers":[{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3d-whell-parallax-carousel_1.0.3_1771400830059_0.6303341297712293"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-18T05:59:34.992Z","modified":"2026-02-18T07:47:10.357Z","1.0.0":"2026-02-18T05:59:35.149Z","1.0.1":"2026-02-18T06:28:08.407Z","1.0.2":"2026-02-18T07:07:20.784Z","1.0.3":"2026-02-18T07:47:10.217Z"},"bugs":{"url":"https://github.com/nodirbek/3d-whell-parallax-carousel/issues"},"author":{"name":"Nodirbek Xushbaxtov"},"license":"MIT","homepage":"https://github.com/nodirbek/3d-whell-parallax-carousel#readme","keywords":["carousel","parallax","3d","slider","react","vue","vanilla","typescript","3d-carousel","parallax-slider"],"repository":{"type":"git","url":"git+https://github.com/nodirbek/3d-whell-parallax-carousel.git"},"description":"Smooth 3D parallax carousel with trapezoid perspective effect. Works with Vanilla JS, React, and Vue.","maintainers":[{"name":"nodirbekdev","email":"nodirbek.devoloper@gmail.com"}],"readme":"# 3d-whell-parallax-carousel\n\nSmooth 3D parallax carousel with trapezoid perspective effect. Shows 5 cards at once — center card flat, side cards angled like a fan. Works with **Vanilla JS**, **React**, **Vue 3**, and **TypeScript**.\n\n## Install\n\n```bash\nnpm install 3d-whell-parallax-carousel\n```\n\n---\n\n## Usage\n\n### Vanilla JS\n\n```js\nimport { ParallaxCarousel } from \"3d-whell-parallax-carousel\";\n\nconst carousel = new ParallaxCarousel(\"#my-container\", [\n '
Card 1
',\n '
Card 2
',\n '
Card 3
',\n]);\n```\n\n### With renderItem callback (HTML string)\n\n```js\nimport { ParallaxCarousel } from \"3d-whell-parallax-carousel\";\n\nconst products = [\n { id: 1, name: \"Product 1\", image: \"/img1.jpg\" },\n { id: 2, name: \"Product 2\", image: \"/img2.jpg\" },\n];\n\nconst carousel = new ParallaxCarousel(\"#my-container\", products, {\n renderItem: ({ item, index }) => `\n
\n \"${item.name}\"\n

${item.name}

\n
\n `,\n});\n```\n\n### TypeScript\n\n```ts\nimport { ParallaxCarousel, type ParallaxCarouselOptions } from \"3d-whell-parallax-carousel\";\n\ninterface Product {\n id: number;\n name: string;\n image: string;\n}\n\nconst products: Product[] = [\n { id: 1, name: \"Product 1\", image: \"/img1.jpg\" },\n { id: 2, name: \"Product 2\", image: \"/img2.jpg\" },\n];\n\nconst options: ParallaxCarouselOptions = {\n autoplay: true,\n renderItem: ({ item }) => `\n
\n \"${item.name}\"\n

${item.name}

\n
\n `,\n};\n\nconst carousel = new ParallaxCarousel(\"#my-container\", products, options);\n```\n\n### React\n\n```jsx\nimport { ParallaxCarouselReact } from \"3d-whell-parallax-carousel/react\";\n\nconst items = [\"
Card 1
\", \"
Card 2
\", \"
Card 3
\"];\n\nfunction App() {\n const ref = useRef(null);\n\n return (\n <>\n console.log(\"Slide:\", index)}\n />\n \n \n );\n}\n```\n\n### React with renderItem (JSX Component)\n\n```jsx\nimport { ParallaxCarouselReact } from \"3d-whell-parallax-carousel/react\";\n\nconst products = [\n { id: 1, name: \"Product 1\", image: \"/img1.jpg\" },\n { id: 2, name: \"Product 2\", image: \"/img2.jpg\" },\n];\n\n// Your custom React component\nfunction ProductCard({ product, index }) {\n return (\n
\n {product.name}\n

{product.name}

\n

Index: {index}

\n
\n );\n}\n\nfunction App() {\n const ref = useRef(null);\n\n return (\n (\n \n ),\n }}\n onChange={({ index }) => console.log(\"Slide:\", index)}\n />\n );\n}\n```\n\n### React with TypeScript\n\n```tsx\nimport { useRef } from \"react\";\nimport {\n ParallaxCarouselReact,\n type ParallaxCarouselReactHandle,\n type ParallaxCarouselReactProps,\n} from \"3d-whell-parallax-carousel/react\";\n\ninterface Product {\n id: number;\n name: string;\n image: string;\n}\n\nconst items: Product[] = [\n { id: 1, name: \"Product 1\", image: \"/img1.jpg\" },\n { id: 2, name: \"Product 2\", image: \"/img2.jpg\" },\n];\n\nfunction App() {\n const carouselRef = useRef(null);\n\n const handleChange: ParallaxCarouselReactProps[\"onChange\"] = ({ index, total }) => {\n console.log(`Slide ${index} of ${total}`);\n };\n\n return (\n <>\n \n ref={carouselRef}\n items={items}\n options={{\n autoplay: true,\n renderItem: ({ item, index }) => (\n
\n {item.name}\n

{item.name}

\n
\n ),\n }}\n onChange={handleChange}\n />\n \n \n );\n}\n```\n\n### Vue 3\n\n```vue\n\n\n\n```\n\n### Vue 3 with renderItem (VNode)\n\n```vue\n\n\n\n```\n\n### Vue 3 with TypeScript\n\n```vue\n\n\n\n```\n\n---\n\n## Options\n\n| Option | Type | Default | Description |\n| -------------- | ------- | ----------------------------- | ---------------------------- |\n| `autoplay` | boolean | `true` | Enable auto-advance |\n| `interval` | number | `2800` | Autoplay interval in ms |\n| `pauseOnHover` | boolean | `true` | Pause autoplay on hover |\n| `duration` | number | `650` | Transition duration in ms |\n| `easing` | string | `'cubic-bezier(0.4,0,0.2,1)'` | CSS easing |\n| `background` | string | `'#111111'` | Card background color |\n| `borderColor` | string | `'rgba(255,255,255,0.1)'` | Card border color |\n| `borderWidth` | string | `'1.5px'` | Card border width |\n| `borderRadius` | string | `'4px'` | Card border radius |\n| `stageHeight` | string | `'420px'` | Height of the carousel stage |\n| `perspective` | number | `900` | CSS perspective value in px |\n| `showGrid` | boolean | `true` | Show background grid |\n| `gridColor` | string | `'rgba(255,255,255,0.032)'` | Grid line color |\n| `gridSize` | string | `'38px'` | Grid cell size |\n| `slots` | object | see below | Per-slot position config |\n| `renderItem` | function | `undefined` | Custom render function |\n\n### `slots` config\n\nCustomize each of the 5 visible positions (`-2` to `+2`):\n\n```ts\nimport type { ParallaxCarouselOptions } from \"3d-whell-parallax-carousel\";\n\nconst options: ParallaxCarouselOptions = {\n slots: {\n '-2': { x: -490, w: 220, h: 330, ry: 50, origin: 'right center', z: 1, op: 1 },\n '-1': { x: -255, w: 192, h: 295, ry: 26, origin: 'right center', z: 2, op: 1 },\n '0': { x: 0, w: 188, h: 275, ry: 0, origin: 'center center', z: 3, op: 1 },\n '1': { x: 255, w: 192, h: 295, ry: -26, origin: 'left center', z: 2, op: 1 },\n '2': { x: 490, w: 220, h: 330, ry: -50, origin: 'left center', z: 1, op: 1 },\n },\n};\n```\n\n| Field | Description |\n| -------- | ----------------------------------- |\n| `x` | Horizontal offset from center in px |\n| `w` | Card width in px |\n| `h` | Card height in px |\n| `ry` | rotateY angle in degrees |\n| `origin` | CSS transform-origin |\n| `z` | z-index |\n| `op` | opacity (0–1) |\n\n### `renderItem` callback\n\nCustom render function for each item. Returns depend on framework:\n\n| Framework | Return Type | Example |\n|-----------|-------------|---------|\n| Vanilla JS | `string` \\| `HTMLElement` | `'
Content
'` |\n| React | `ReactNode` | `` |\n| Vue 3 | `VNode` \\| `string` | `h('div', 'Content')` |\n\n**Context object:**\n\n```ts\ntype RenderItem = (context: {\n item: T; // The item data\n index: number; // Item index\n container: HTMLElement; // Card container element\n}) => ReactNode | VNode | HTMLElement | string;\n```\n\n---\n\n## API\n\n### Vanilla JS / Core\n\n```js\ncarousel.next(); // Go to next slide\ncarousel.prev(); // Go to previous slide\ncarousel.goTo(index); // Jump to specific index\ncarousel.updateOptions({\n // Update options at runtime\n interval: 5000,\n background: \"#222\",\n});\ncarousel.destroy(); // Clean up and remove from DOM\n```\n\n### React Ref Methods\n\n```tsx\nconst ref = useRef(null);\n\nref.current?.next();\nref.current?.prev();\nref.current?.goTo(2);\nref.current?.updateOptions({ interval: 5000 });\nref.current?.destroy();\n```\n\n### Vue Ref Methods\n\n```vue\n\n```\n\n## Events\n\n### Vanilla JS\n\n```js\ncontainer.addEventListener(\"change\", (e) => {\n console.log(e.detail.index); // current index\n console.log(e.detail.total); // total items\n});\n```\n\n### React\n\n```tsx\n {\n console.log(`Slide ${index} of ${total}`);\n }}\n/>\n```\n\n### Vue\n\n```vue\n console.log(`Slide ${index} of ${total}`)\"\n/>\n```\n\n---\n\n## Build from source\n\n```bash\nnpm install\nnpm run build\n```\n\nOutput goes to `dist/`.\n\n### Development\n\n```bash\n# Watch mode\nnpm run dev\n\n# Type check\nnpm run typecheck\n```\n\n---\n\n## TypeScript Support\n\nThis library includes full TypeScript support with:\n\n- ✅ Complete type definitions for all exports\n- ✅ Generic type support for items (``)\n- ✅ Type-safe `renderItem` callback with framework-specific return types\n- ✅ ReactNode support for React\n- ✅ VNode support for Vue\n- ✅ Type-safe options and props\n- ✅ Typed event handlers\n- ✅ Proper ref types for React and Vue\n- ✅ tsconfig.json included\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}