{"_id":"3d-slider","_rev":"3-3e2e7a8ec7461f76c9b1494c53cf8226","name":"3d-slider","dist-tags":{"latest":"1.2.1"},"versions":{"1.0.0":{"name":"3d-slider","version":"1.0.0","keywords":["3d-slider","slider","cylindrical-animation","responsive-slider","javascript","animation"],"author":{"name":"luay abbas"},"license":"MIT","_id":"3d-slider@1.0.0","maintainers":[{"name":"luay_abbas","email":"abbasluay1981@gmail.com"}],"homepage":"https://luayabbas1981.github.io/3d-slider-demo/","bugs":{"url":"https://github.com/Luayabbas1981/3d-slider-package/issues"},"dist":{"shasum":"604612754bbfc1e8d1b77e3e0678b144f7b5d79f","tarball":"https://registry.npmjs.org/3d-slider/-/3d-slider-1.0.0.tgz","fileCount":8,"integrity":"sha512-wa94TGs/8FUOn9JBpUHL9TgkAr4CbCjHWZWCP1H1dsRoligFElMZCt5BVRlfCAMKlRtWYLMcfuYTbOxx+5uEnw==","signatures":[{"sig":"MEQCICBpWVXWu3yxFqeyvkOCv4j9hXQx8sdsvhENFlmlF5MFAiAztAaV6h3MWtvLFOOfHAdUYbdy181QKJ2rtlqoltVnew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155751},"main":"src/index.js","style":"src/3d-slider.css","scripts":{"build":"webpack --mode production","build:dev":"webpack --mode development"},"_npmUser":{"name":"luay_abbas","email":"abbasluay1981@gmail.com"},"repository":{"url":"git+https://github.com/Luayabbas1981/3d-slider-package.git","type":"git"},"_npmVersion":"8.19.4","description":"A customizable 3D cylindrical slider component for web projects.","directories":{},"_nodeVersion":"16.20.2","dependencies":{},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3d-slider_1.0.0_1733074638890_0.36189266498327943","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"3d-slider","version":"1.1.0","keywords":["3d-slider","slider","cylindrical-animation","responsive-slider","javascript","animation"],"author":{"name":"luay abbas"},"license":"MIT","_id":"3d-slider@1.1.0","maintainers":[{"name":"luay_abbas","email":"abbasluay1981@gmail.com"}],"homepage":"https://luayabbas1981.github.io/3d-slider-demo/","bugs":{"url":"https://github.com/Luayabbas1981/3d-slider-package/issues"},"dist":{"shasum":"c32e1e7b3053dcdfd3b867c8081f8a313b3cdbbd","tarball":"https://registry.npmjs.org/3d-slider/-/3d-slider-1.1.0.tgz","fileCount":8,"integrity":"sha512-G9q8RHa5D6Fh58XvmXAQOrRGpjDGt2niHiS7mE0NznTORUJXQbw7stLzpiORnh/nUF4lx6I4FHYv1fKLZgXaWA==","signatures":[{"sig":"MEQCIHLzz5kkEyTZOkrxivK2smnlj2wzBE5sVTVVZvXSvZyzAiBGY/eTViOlUAYZdnfqAdvhCKDaSU2oA3CjWBLlOANQCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155867},"main":"src/index.js","style":"src/3d-slider.css","scripts":{"build":"webpack --mode production","build:dev":"webpack --mode development"},"_npmUser":{"name":"luay_abbas","email":"abbasluay1981@gmail.com"},"repository":{"url":"git+https://github.com/Luayabbas1981/3d-slider-package.git","type":"git"},"_npmVersion":"8.19.4","description":"A customizable 3D cylindrical slider component for web projects.","directories":{},"_nodeVersion":"16.20.2","dependencies":{},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3d-slider_1.1.0_1733263363396_0.1039999083313714","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"3d-slider","version":"1.2.0","keywords":["3d-slider","slider","cylindrical-animation","responsive-slider","javascript","animation"],"author":{"name":"luay abbas"},"license":"MIT","_id":"3d-slider@1.2.0","maintainers":[{"name":"luay_abbas","email":"abbasluay1981@gmail.com"}],"homepage":"https://luayabbas1981.github.io/3d-slider-demo/","bugs":{"url":"https://github.com/Luayabbas1981/3d-slider-package/issues"},"dist":{"shasum":"236ed7ab5d05a8e758dac91535f960071028c308","tarball":"https://registry.npmjs.org/3d-slider/-/3d-slider-1.2.0.tgz","fileCount":8,"integrity":"sha512-H4xRir7p4v0wXf9JptEMmrWnA3/nuyyUPc3DoA/aZ4bhujGTXnKEMLOKy6CkEsqeF7pni26kMW6qwafcdH9Vbw==","signatures":[{"sig":"MEUCIGMz6AgkyhA4+rmfl4glEBxsbFSDWhTYU26QVb5c8y+qAiEAhnUVegQTvTIMZjw6ue7bZhl8wGPbEG4d+WTeueTkh6w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24937},"main":"src/index.js","style":"src/3d-slider.css","scripts":{"build":"webpack --mode production","build:dev":"webpack --mode development"},"_npmUser":{"name":"luay_abbas","email":"abbasluay1981@gmail.com"},"repository":{"url":"git+https://github.com/Luayabbas1981/3d-slider-package.git","type":"git"},"_npmVersion":"10.9.2","description":"A customizable 3D cylindrical slider component for web projects.","directories":{},"_nodeVersion":"22.13.1","dependencies":{},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/3d-slider_1.2.0_1739610778046_0.5601961950677223","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"3d-slider","version":"1.2.1","description":"A customizable 3D cylindrical slider component for web projects.","main":"src/index.js","style":"src/3d-slider.css","scripts":{"build":"webpack --mode production","build:dev":"webpack --mode development"},"keywords":["3d-slider","slider","cylindrical-animation","responsive-slider","javascript","animation"],"author":{"name":"luay abbas"},"license":"MIT","homepage":"https://luayabbas1981.github.io/3d-slider-demo/","repository":{"type":"git","url":"git+https://github.com/Luayabbas1981/3d-slider-package.git"},"dependencies":{},"_id":"3d-slider@1.2.1","bugs":{"url":"https://github.com/Luayabbas1981/3d-slider-package/issues"},"_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Z5jf84qmhI6KhqVC00kAAcHcXArS3aDNvV3rGShLqrw2L27zy72rPzfkAJGUrcKYO0eR+gf6fYE8aJC3+oaeAQ==","shasum":"f4d2cd843aa1ec0c91e8f2b6fca4cd8640e2ca12","tarball":"https://registry.npmjs.org/3d-slider/-/3d-slider-1.2.1.tgz","fileCount":8,"unpackedSize":24822,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD6gL+YmFtACe3rhyZbNKfg0HXhfFfXwr6d/b0yETZGRQIgQRc45fzWypvt6SKjIW83/YYlc9TTrckWSLYYsOESrnU="}]},"_npmUser":{"name":"luay_abbas","email":"abbasluay1981@gmail.com"},"directories":{},"maintainers":[{"name":"luay_abbas","email":"abbasluay1981@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3d-slider_1.2.1_1739921937411_0.03177445200489837"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-01T17:37:18.889Z","modified":"2025-02-18T23:38:57.798Z","1.0.0":"2024-12-01T17:37:19.093Z","1.1.0":"2024-12-03T22:02:43.625Z","1.2.0":"2025-02-15T09:12:58.255Z","1.2.1":"2025-02-18T23:38:57.618Z"},"bugs":{"url":"https://github.com/Luayabbas1981/3d-slider-package/issues"},"author":{"name":"luay abbas"},"license":"MIT","homepage":"https://luayabbas1981.github.io/3d-slider-demo/","keywords":["3d-slider","slider","cylindrical-animation","responsive-slider","javascript","animation"],"repository":{"type":"git","url":"git+https://github.com/Luayabbas1981/3d-slider-package.git"},"description":"A customizable 3D cylindrical slider component for web projects.","maintainers":[{"name":"luay_abbas","email":"abbasluay1981@gmail.com"}],"readme":"# 3D slider\n\nA customizable animation slider component for web projects.\n\n## Description\n\n`3D slider` allows you to create an interactive slider with a unique 3D cylindrical animation effect. The slider dynamically adjusts for different screen sizes and supports configurable navigation, dots, and animations.\n\n## Features\n\n- **3D Cylinder Animation**: Cards are arranged in a cylindrical shape with smooth rotations.\n- **Dynamic Properties**: Adjusts perspective, card dimensions, and animations dynamically based on screen width.\n- **Customizable screen size definitions**:\n  - Large Screens (≥1280px): Up to cardsToShowLargeScreen.\n  - Medium Screens (1024px–1279px): Up to cardsToShowMediumScreen.\n  - Small Screens (768px–1023px): Up to cardsToShowSmallScreen.\n  - Mobile Screens (<768px): Discover triangle mode.\n- **Customizable Dots**: Includes configurable dots for group navigation with customizable colors.\n- **Navigation Options**: Supports buttons for navigating individual cards or groups, with optional navigation dots.\n- **Touch Support**: Mobile-friendly design with touch gesture support for navigation.\n- **Always-On Rotation Control**: When alwaysOnMode is enabled, users can toggle continuous rotation on or off by clicking or tapping - on the slider.\n\n## Installation\n\nInstallation:\n\n```bash\nnpm install 3d-slider\n```\n\nor\n\n```bash\nyarn add 3d-slider\n```\n\n```bash\nimport { initializeSlider } from '3d-slider';\nimport '3d-slider/src/3d-slider.css';\n```\n```bash\ninitializeSlider({\n  sliderContainerClass: \"slider\", // CSS class of the slider container.\n  perspective: 1, // Slider container perspective.\n  transitionDuration: 2, // Transition duration for animations (in seconds) - Default: 2\n  alwaysOnMode: false, // Enable or disable continuous rotation mode.\n  alwaysOnDesktopDuration: 15, // Continuous rotation duration for desktop (in seconds) - Recommend: 15\n  alwaysOnMobileDuration: 5, // Continuous rotation duration for mobile (in seconds) - Recommend: 5\n  cardsToShowLargeScreen: 10, // Number of cards visible on large screens (≥1280px) - Default: 10\n  cardsToShowMediumScreen: 7, // Number of cards visible on medium screens (1024px–1279px) - Default: 7\n  cardsToShowSmallScreen: 4, // Number of cards visible on small screens (768px–1023px) - Default: 4\n  cardsToShowMobile: 2, // Cards to show on mobile mode (min 2) (max 3) 'Triangle mode' (<768px) - Default: 2\n  dotsMode: true, // Enable or disable navigation dots.\n  dotColor: \"#959899\", // HEX color for navigation dots (6 digit).\n});\n\n```\n\n### Options\n\n- **sliderContainerClass**: The CSS class of the container element.\n- **perspective**: 1 or higher to adjust container perspective.\n- **transitionDuration**: Transition duration (in seconds) for animations. - **Default**: 2\n- **alwaysOnMode**: Enable or disable always-on mode.\n- **alwaysOnDesktopDuration**: Continuous rotation duration for desktop (in seconds).\n- **alwaysOnMobileDuration**: Continuous rotation duration for mobile (in seconds).\n- **cardsToShowLargeScreen**: Number of cards visible on large screens (≥1280px). - Default: 10\n- **cardsToShowMediumScreen**: Number of cards visible on medium screens (1024px–1279px). - Default: 7\n- **cardsToShowSmallScreen**: Number of cards visible on small screens (768px–1023px). - Default: 4\n- **cardsToShowMobile**: Switch between (min 2) (max 3) 'Triangle mobile mode'(< 768px).\n- **dots**: Show navigation dots (`true` / `false`).\n- **dotColor**: Color of the navigation dots \"HEX Color 6 digit\".\n\n### How to Use the Toggle for Always-On Mode\n\nIf the alwaysOnMode is enabled in the configuration:\n\nClick on the Slider:\nClicking toggles between rotation and pause.\nWhen paused, the slider snaps to the nearest angle, aligning the active card in the viewport.\n\n## Dependencies\n\nThis version of animate-slider has no external dependencies, making it lightweight and easy to use. No additional packages are required to run the slider.\n\n## HTML\n\n```bash\n<body>\n  <div class=\"your-slider-container-class\">\n    <div>card-1</div>\n    <div>card-2</div>\n    <div>card-3</div>\n  </div>\n</body>\n```\n\n## Library demo link\n\n[3D Slider demo link...](https://luayabbas1981.github.io/3d-slider-demo/)\n\n## Other links\n\n[Portfolio link...](https://luayabbas1981.github.io/portfolio-last/)\n","readmeFilename":"README.md"}