{"_id":"@azfar_razzaq/react-infinite-carousel","_rev":"8-26ee9e70454ee6231c32b84d67641d85","name":"@azfar_razzaq/react-infinite-carousel","dist-tags":{"latest":"3.0.1"},"versions":{"1.0.0":{"name":"@azfar_razzaq/react-infinite-carousel","version":"1.0.0","keywords":["react","carousel","front-end"],"author":{"name":"Azfar Razzaq"},"license":"ISC","_id":"@azfar_razzaq/react-infinite-carousel@1.0.0","maintainers":[{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"}],"homepage":"https://github.com/Azfar731/react-infinite-carousel-package#readme","bugs":{"url":"https://github.com/Azfar731/react-infinite-carousel-package/issues"},"dist":{"shasum":"a7f4ff51ec138d93ed10c95d984475d11cb39c04","tarball":"https://registry.npmjs.org/@azfar_razzaq/react-infinite-carousel/-/react-infinite-carousel-1.0.0.tgz","fileCount":4,"integrity":"sha512-VGVizphEQrnkf+Kd4LlLlHnXbOUSAkztJlbYcjR264lwBs+eA735BWm7FIP648A0jwHROYhNvzDAMy4IjAKaeA==","signatures":[{"sig":"MEUCIGVn/HFS5HX5m0aLtlJW45ncGcwksg/1ryXys1klycvhAiEA5+K7z50r+kE+ioKWrZTwg6hZdMbliyhWVs1vDNlxadc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27183},"main":"dist/index.js","types":"dist/Carousel.d.ts","module":"dist/index.mjs","gitHead":"9195f9971f52d72b7d6e37650846f37016b15403","scripts":{"dev":"vite build --watch","test":"echo \"Error: no test specified\" && exit 1","build":"vite build"},"_npmUser":{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"},"repository":{"url":"git+https://github.com/Azfar731/react-infinite-carousel-package.git","type":"git"},"_npmVersion":"10.9.2","description":"This package provides a react component to render an infinite carousel","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.3","rollup-plugin-dts":"^6.2.1","@vitejs/plugin-react":"^4.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-infinite-carousel_1.0.0_1753353219725_0.14664284709263997","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Broken main entry in package.json pointed to a non-existent file, causing build failures in consuming projects. Fixed in v3.0.1. Please upgrade."},"2.0.0":{"name":"@azfar_razzaq/react-infinite-carousel","version":"2.0.0","keywords":["react","carousel","front-end"],"author":{"name":"Azfar Razzaq"},"license":"ISC","_id":"@azfar_razzaq/react-infinite-carousel@2.0.0","maintainers":[{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"}],"homepage":"https://github.com/Azfar731/react-infinite-carousel-package#readme","bugs":{"url":"https://github.com/Azfar731/react-infinite-carousel-package/issues"},"dist":{"shasum":"69979186cb0f38b32b60b33a505ca76e4716c175","tarball":"https://registry.npmjs.org/@azfar_razzaq/react-infinite-carousel/-/react-infinite-carousel-2.0.0.tgz","fileCount":5,"integrity":"sha512-lXI0S9VjBWP42igzUhmJAl4zw5Y4LTk5g0Pf41QTIFi2VwPFYxO8RvYFv5PFuUDzWhjDriRnb1i4mHXDgc98Hw==","signatures":[{"sig":"MEUCIGqAWeEEg+EMguINBjMuBkZCKudUcLIbFsO5pWM2kN4+AiEA4wHmqNm0FyMaVJB8vMaR5DSiFstuoTvacBRCopKv0+I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29633},"main":"dist/index.js","types":"dist/Carousel.d.ts","module":"dist/index.mjs","gitHead":"e1d974bc2f578e8605c610b9f7ac1e1c41ada5e7","scripts":{"dev":"vite build --watch","test":"echo \"Error: no test specified\" && exit 1","build":"vite build","types":"tsc"},"_npmUser":{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"},"repository":{"url":"git+https://github.com/Azfar731/react-infinite-carousel-package.git","type":"git"},"_npmVersion":"10.9.2","description":"This package provides a react component to render an infinite carousel","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.3","rollup-plugin-dts":"^6.2.1","@vitejs/plugin-react":"^4.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-infinite-carousel_2.0.0_1753455867896_0.8947941160737543","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Broken main entry in package.json pointed to a non-existent file, causing build failures in consuming projects. Fixed in v3.0.1. Please upgrade."},"2.0.1":{"name":"@azfar_razzaq/react-infinite-carousel","version":"2.0.1","keywords":["react","carousel","front-end"],"author":{"name":"Azfar Razzaq"},"license":"ISC","_id":"@azfar_razzaq/react-infinite-carousel@2.0.1","maintainers":[{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"}],"homepage":"https://github.com/Azfar731/react-infinite-carousel-package#readme","bugs":{"url":"https://github.com/Azfar731/react-infinite-carousel-package/issues"},"dist":{"shasum":"b8fed6d08c61482f5c7505a41e13be5d343f3c6e","tarball":"https://registry.npmjs.org/@azfar_razzaq/react-infinite-carousel/-/react-infinite-carousel-2.0.1.tgz","fileCount":5,"integrity":"sha512-Fu+f/Asqm/xvdvPSFYjJ08OW50+gjI4EzmaqWFggBxm3ICwciwI+9JM3OcYMiip72Z9u1YR00rmTLzYsMJ1fQQ==","signatures":[{"sig":"MEUCIDFysJtPGdIEYuMwEVQxYWnBBf9/aTH4aV4pED6dVYowAiEAvjwqsZHoZThJH5WL/udXdpPjEZ9GwvhnfSfdINCSRIs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30184},"main":"dist/index.js","types":"dist/Carousel.d.ts","module":"dist/index.mjs","gitHead":"3467ab20f56a7138b5ce8350eff8b510322c6aa2","scripts":{"dev":"vite build --watch","test":"echo \"Error: no test specified\" && exit 1","build":"vite build","types":"tsc"},"_npmUser":{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"},"repository":{"url":"git+https://github.com/Azfar731/react-infinite-carousel-package.git","type":"git"},"_npmVersion":"10.9.2","description":"This package provides a react component to render an infinite carousel","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.3","rollup-plugin-dts":"^6.2.1","@vitejs/plugin-react":"^4.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-infinite-carousel_2.0.1_1753459641100_0.19916916595987422","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Broken main entry in package.json pointed to a non-existent file, causing build failures in consuming projects. Fixed in v3.0.1. Please upgrade."},"2.1.0":{"name":"@azfar_razzaq/react-infinite-carousel","version":"2.1.0","keywords":["react","carousel","front-end"],"author":{"name":"Azfar Razzaq"},"license":"ISC","_id":"@azfar_razzaq/react-infinite-carousel@2.1.0","maintainers":[{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"}],"homepage":"https://github.com/Azfar731/react-infinite-carousel-package#readme","bugs":{"url":"https://github.com/Azfar731/react-infinite-carousel-package/issues"},"dist":{"shasum":"6a081de6f0e330f917683eb45f2cf7cc7df04d7e","tarball":"https://registry.npmjs.org/@azfar_razzaq/react-infinite-carousel/-/react-infinite-carousel-2.1.0.tgz","fileCount":4,"integrity":"sha512-mp/2XptC6QSIdkK2oRW+DY8zIO2ZHtO3mlFkcZPSVJtw3P0FZam1z7L4KkLpBcoQbi0nVecnBBrJhnV6/OFdyw==","signatures":[{"sig":"MEQCIGQMf3sC0aDkO8EAvTzf+CXlcmt5rjEVoDBX1AAOyBWSAiAyXG0dlRhKdkCUkM6XY1HiPsbrxQkRlR72svxFNZ9JsQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29458},"main":"dist/index.js","types":"dist/Carousel.d.ts","module":"dist/index.mjs","gitHead":"0898d2096020b138f8603ca7be3c48ad17d5d74e","scripts":{"dev":"vite build --watch ","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","types":"tsc"},"_npmUser":{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"},"repository":{"url":"git+https://github.com/Azfar731/react-infinite-carousel-package.git","type":"git"},"_npmVersion":"10.9.2","description":"This package provides a react component to render an infinite carousel","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.3","@types/node":"^24.1.0","rollup-plugin-dts":"^6.2.1","@vitejs/plugin-react":"^4.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-infinite-carousel_2.1.0_1753534169793_0.49055036536402086","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Broken main entry in package.json pointed to a non-existent file, causing build failures in consuming projects. Fixed in v3.0.1. Please upgrade."},"2.1.1":{"name":"@azfar_razzaq/react-infinite-carousel","version":"2.1.1","keywords":["react","carousel","front-end"],"author":{"name":"Azfar Razzaq"},"license":"ISC","_id":"@azfar_razzaq/react-infinite-carousel@2.1.1","maintainers":[{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"}],"homepage":"https://github.com/Azfar731/react-infinite-carousel-package#readme","bugs":{"url":"https://github.com/Azfar731/react-infinite-carousel-package/issues"},"dist":{"shasum":"9da1f720a8a9fac13a24b99fd0922502b831bab2","tarball":"https://registry.npmjs.org/@azfar_razzaq/react-infinite-carousel/-/react-infinite-carousel-2.1.1.tgz","fileCount":5,"integrity":"sha512-E0L1ScOLiZe1xtzEWCMedupixLHahlew5uhMjxgl3YcCcj+fByKrDFMyGmFpy9YgiRyu0Yq3zevQtCBln7tJmg==","signatures":[{"sig":"MEUCIEYR+fcg6Ll7+MGRCgYO28WB3nJNfDDnzgfevh93jBcyAiEAsXZzn+fWStd4BXwMuMYEoiOJuebZPJoSA68UshVj/1Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31328},"main":"dist/index.js","types":"dist/Carousel.d.ts","module":"dist/index.mjs","gitHead":"bd7fc2e3a8d49959805b941ca484febb0c9bed77","scripts":{"dev":"vite build --watch ","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","types":"tsc"},"_npmUser":{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"},"repository":{"url":"git+https://github.com/Azfar731/react-infinite-carousel-package.git","type":"git"},"_npmVersion":"10.9.2","description":"This package provides a react component to render an infinite carousel","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.3","@types/node":"^24.1.0","rollup-plugin-dts":"^6.2.1","@vitejs/plugin-react":"^4.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-infinite-carousel_2.1.1_1753698836917_0.9634515719900338","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Broken main entry in package.json pointed to a non-existent file, causing build failures in consuming projects. Fixed in v3.0.1. Please upgrade."},"3.0.0":{"name":"@azfar_razzaq/react-infinite-carousel","version":"3.0.0","keywords":["react","carousel","front-end"],"author":{"name":"Azfar Razzaq"},"license":"ISC","_id":"@azfar_razzaq/react-infinite-carousel@3.0.0","maintainers":[{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"}],"homepage":"https://github.com/Azfar731/react-infinite-carousel-package#readme","bugs":{"url":"https://github.com/Azfar731/react-infinite-carousel-package/issues"},"dist":{"shasum":"1bc454f8b433befab6d09dff26d1deadb3de5d0d","tarball":"https://registry.npmjs.org/@azfar_razzaq/react-infinite-carousel/-/react-infinite-carousel-3.0.0.tgz","fileCount":5,"integrity":"sha512-0QpLx4K/sWJi/FWeob6IdS1n1KXuCm6NNqjuyMeymOery7OTjH4O5pakUUHLj+RQWiXbCkBZhXc+4gUdlXjQzQ==","signatures":[{"sig":"MEYCIQCh8CbUgVrT2Edr4sQBxqVOPGEs5cUm7xe5o4tsEjpiEAIhAIm5GIPckP8O9IbVVIREr1As2I2MtwcevlzIIGaTnm5Y","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31789},"main":"dist/index.js","types":"dist/Carousel.d.ts","module":"dist/index.mjs","gitHead":"36238bdc1e04a8f6a5108b784b03f0ee9edac66d","scripts":{"dev":"vite build --watch ","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","types":"tsc"},"_npmUser":{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"},"repository":{"url":"git+https://github.com/Azfar731/react-infinite-carousel-package.git","type":"git"},"_npmVersion":"10.9.2","description":"This package provides a react component to render an infinite carousel","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.3","@types/node":"^24.1.0","rollup-plugin-dts":"^6.2.1","@vitejs/plugin-react":"^4.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-infinite-carousel_3.0.0_1753705908449_0.2542175087122862","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Broken main entry in package.json pointed to a non-existent file, causing build failures in consuming projects. Fixed in v3.0.1. Please upgrade."},"3.0.1":{"name":"@azfar_razzaq/react-infinite-carousel","version":"3.0.1","keywords":["react","carousel","front-end"],"author":{"name":"Azfar Razzaq"},"license":"ISC","_id":"@azfar_razzaq/react-infinite-carousel@3.0.1","maintainers":[{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"}],"homepage":"https://github.com/Azfar731/react-infinite-carousel-package#readme","bugs":{"url":"https://github.com/Azfar731/react-infinite-carousel-package/issues"},"dist":{"shasum":"4c646c4512763ad2c80c9d6b369062dcf8ac96b6","tarball":"https://registry.npmjs.org/@azfar_razzaq/react-infinite-carousel/-/react-infinite-carousel-3.0.1.tgz","fileCount":5,"integrity":"sha512-8dED9nmplvDvtLloWGPRZpt7A8v7MXjvEUuaWzVNKGxCgzEc7Y2ZlAQNngMgYpDyaURqR/n6ybJx/uoDq9/nPA==","signatures":[{"sig":"MEYCIQDh3lkobs1XqaPwCJMjeA5j1N9lpRUCil/lYCAI3sfWIQIhANf3NROgFr7Me4Rue1VbrlWdv5SWDEpaJAdMg5779or7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31793},"main":"dist/index.umd.js","types":"dist/Carousel.d.ts","module":"dist/index.mjs","gitHead":"0f6efb62aef6253c1754f4e0f308ecc6ef423d61","scripts":{"dev":"vite build --watch ","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","types":"tsc"},"_npmUser":{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"},"repository":{"url":"git+https://github.com/Azfar731/react-infinite-carousel-package.git","type":"git"},"_npmVersion":"10.9.2","description":"This package provides a react component to render an infinite carousel","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.3","@types/node":"^24.1.0","rollup-plugin-dts":"^6.2.1","@vitejs/plugin-react":"^4.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_npmOperationalInternal":{"tmp":"tmp/react-infinite-carousel_3.0.1_1753726010155_0.04355441226235435","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-07-24T10:33:39.634Z","modified":"2026-01-19T07:58:24.605Z","1.0.0":"2025-07-24T10:33:39.906Z","2.0.0":"2025-07-25T15:04:28.087Z","2.0.1":"2025-07-25T16:07:21.263Z","2.1.0":"2025-07-26T12:49:29.975Z","2.1.1":"2025-07-28T10:33:57.092Z","3.0.0":"2025-07-28T12:31:48.600Z","3.0.1":"2025-07-28T18:06:50.347Z"},"bugs":{"url":"https://github.com/Azfar731/react-infinite-carousel-package/issues"},"author":{"name":"Azfar Razzaq"},"license":"ISC","homepage":"https://github.com/Azfar731/react-infinite-carousel-package#readme","keywords":["react","carousel","front-end"],"repository":{"url":"git+https://github.com/Azfar731/react-infinite-carousel-package.git","type":"git"},"description":"This package provides a react component to render an infinite carousel","maintainers":[{"name":"azfar_razzaq","email":"azfarrazzaq23@gmail.com"}],"readme":"# React Infinite Carousel\r\n\r\nA customizable, responsive infinite carousel component for React applications. This package provides an easy way to create smooth, infinite-scrolling carousels that can display both images and text.\r\n\r\n\r\n\r\n\r\n\r\n## Features\r\n\r\n- 🔄 Smooth infinite scrolling animation\r\n- 📱 Responsive design with customizable breakpoints\r\n- 🖼️ Support for both images and text content\r\n- ⚡ Auto-calculation of required clones to fill the viewport\r\n- 🎮 Customizable animation speed and direction\r\n- 🖱️ Interactive hover effects (speed up, slow down, or pause)\r\n- 🌫️ Optional fade effect at the edges\r\n- 📐 Flexible styling options\r\n- 📦 TypeScript support with full type definitions\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @azfar_razzaq/react-infinite-carousel\r\n# or\r\nyarn add @azfar_razzaq/react-infinite-carousel\r\n```\r\n\r\n## Usage\r\n\r\n### Basic Image Carousel\r\n\r\n```tsx\r\nimport Carousel from \"@azfar_razzaq/react-infinite-carousel\";\r\n\r\nfunction App() {\r\n const images = [\r\n \"https://example.com/image1.jpg\",\r\n \"https://example.com/image2.jpg\",\r\n \"https://example.com/image3.jpg\",\r\n ];\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n### Text Carousel\r\n\r\n```tsx\r\nimport Carousel from \"@azfar_razzaq/react-infinite-carousel\";\r\n\r\nfunction App() {\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n### Responsive Carousel with Custom Breakpoints\r\n\r\n```tsx\r\nimport Carousel from \"@azfar_razzaq/react-infinite-carousel\";\r\n\r\nfunction App() {\r\n const responsiveConfig = [\r\n { breakpoint: 480, numOfCopies: 4 }, // up to 480px\r\n { breakpoint: 768, numOfCopies: 3 }, // 481-768px\r\n { breakpoint: 1024, numOfCopies: 2 }, // 769-1024px\r\n ];\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n## API Reference\r\n\r\n### Common Props\r\n\r\nThese props are available for both image and text carousels:\r\n\r\n| Prop | Type | Default | Description |\r\n| -------------------- | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| `itemType` | `\"images\" \\| \"text\"` | Required | Specifies whether the carousel displays images or text |\r\n| `durationPerClone` | `number` | `10` | Time (in seconds) it takes one clone to travel the full carousel.The total loop duration is `durationPerClone × numberOfClones`, so the apparent speed remains constant even when the clone count changes with viewport width. |\r\n| `numOfCopies` | `number` | Automatically calculated based on the current viewport width. | Base number of copies to display. The actual number of clones will be doubled (e.g., if set to 3, total clones will be 6) |\r\n| `responsiveClones` | `Array<{ breakpoint: number, numOfCopies: number }>` | `undefined` | Responsive configuration for different screen sizes. Note: The numOfCopies value is doubled for each breakpoint |\r\n| `animationDirection` | `\"ltr\" \\| \"rtl\"` | `\"rtl\"` | Direction of animation (left-to-right or right-to-left) |\r\n| `className` | `string` | `undefined` | Additional CSS class for styling carousel items |\r\n| `hoverSpeedFactor` | `number` | `1` | Speed multiplier on hover (0 = pause, <1 = slower, >1 = faster) |\r\n| `fade` | `number` | `undefined` | Width in pixels for the fade effect at the edges. Creates a gradient fade at both ends of the carousel |\r\n\r\n### Image Carousel Props\r\n\r\nAdditional props when `itemType=\"images\"`:\r\n\r\n| Prop | Type | Description |\r\n| -------------- | ---------- | ---------------------------------------------- |\r\n| `images_links` | `string[]` | Array of image URLs to display in the carousel |\r\n\r\n### Text Carousel Props\r\n\r\nAdditional props when `itemType=\"text\"`:\r\n\r\n| Prop | Type | Description |\r\n| ------ | -------- | --------------------------------------- |\r\n| `text` | `string` | Text content to display in the carousel |\r\n\r\n## Responsive Configuration\r\n\r\nBy default, the carousel automatically adjusts the number of clones based on the viewport width to ensure optimal display and smooth scrolling. This automatic calculation ensures there are no empty spaces in the carousel regardless of screen size.\r\n\r\nHowever, if you need more control over the responsive behavior, you can use the `responsiveClones` prop. This prop accepts an array of breakpoint configurations, where each configuration object has two properties:\r\n\r\n- `breakpoint`: The maximum width in pixels for this configuration to apply\r\n- `numOfCopies`: Base number of copies to display at this breakpoint. The actual number of clones will be doubled (e.g., if set to 3, total clones will be 6)\r\n\r\nThe carousel follows this logic to determine the number of clones:\r\n\r\n1. First, it evaluates the `responsiveClones` array from smallest to largest breakpoint.\r\n2. If the current viewport width is greater than all defined breakpoints, it falls back to the `numOfCopies` parameter.\r\n3. If `numOfCopies` is not provided, it uses automatic calculation.\r\n\r\nFor example:\r\n\r\n```tsx\r\nconst breakpoints = [\r\n { breakpoint: 1024, numOfCopies: 3 }, // Applied up to 1024px\r\n { breakpoint: 1200, numOfCopies: 5 }, // Applied between 1024px and 1200px\r\n];\r\n```\r\n\r\nIf the viewport width is 1400px (greater than all breakpoints):\r\n\r\n- First tries to use `numOfCopies` parameter\r\n- If `numOfCopies` is not provided, falls back to automatic calculation\r\n\r\nIf neither `responsiveClones` nor `numOfCopies` is provided, the carousel will use its automatic calculation mode to determine the optimal number of copies needed to fill the viewport.\r\n\r\n## License\r\n\r\nISC\r\n\r\n## Author\r\n\r\nAzfar Razzaq\r\n\r\n## Issues and Feedback\r\n\r\nFound a bug or have a feature request? Please file an issue at [GitHub Issues](https://github.com/Azfar731/react-infinite-carousel-package/issues).\r\n","readmeFilename":"README.md"}