{"_id":"@atom-design-mog/moglix-carousel","_rev":"2-a6cbcbe0977a5b25a0b62908f903b550","name":"@atom-design-mog/moglix-carousel","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/moglix-carousel","version":"1.0.0","keywords":["react-native","carousel","slider","autoplay","ui-component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/moglix-carousel@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"281d0c7584f09073903373b285169971065b69bd","tarball":"https://registry.npmjs.org/@atom-design-mog/moglix-carousel/-/moglix-carousel-1.0.0.tgz","fileCount":3,"integrity":"sha512-Ylyu6I3JDYOG3mayl3mIMtk8oFAXECUOqra8kMGxSoFfLBIBgduxVxd8wCrg1zvu1q0t2s/DrtzBoQ4cIjWr6A==","signatures":[{"sig":"MEUCIQDXVGxnf15S4PJYqaByllTHUeN0Z8uB7jzGeJTvmt+SNwIgWRvL0Xy9LtnXtRRJidzIM8gFYaoeUPeZcJPUUkBp9CI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5629},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A React Native carousel component with auto-play, dots, and progress bar.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/moglix-carousel_1.0.0_1763727951516_0.345717169770944","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/moglix-carousel","version":"1.0.1","description":"A React Native carousel component with auto-play, dots, and progress bar.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","carousel","slider","autoplay","ui-component"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/moglix-carousel@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-56EUYH/e32axGvhlJJdjHoCod3/UgRuL4DMLeeqjuSSSf8ljRS/3xqwfdtgcejJI3ZG/58XUOtcWBvTARh2CBw==","shasum":"8d672cebdcdef7fdc0a4c7a6a48cf2bff13119bd","tarball":"https://registry.npmjs.org/@atom-design-mog/moglix-carousel/-/moglix-carousel-1.0.1.tgz","fileCount":4,"unpackedSize":9261,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCpr9fUz3F0wwl8G0ib7hx9aCtgvTgSsSqXKEgLQdggTgIhAP2y5C/+BYxpN2Qwck2C0IkegN3bg00xyCgwaCvyueyt"}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/moglix-carousel_1.0.1_1763973528880_0.9943377513131475"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T12:25:51.415Z","modified":"2025-11-24T08:38:49.238Z","1.0.0":"2025-11-21T12:25:51.703Z","1.0.1":"2025-11-24T08:38:49.043Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","carousel","slider","autoplay","ui-component"],"description":"A React Native carousel component with auto-play, dots, and progress bar.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/moglix-carousel\n\nA modern, auto-playing, fully responsive React Native Carousel built for the Atom Design System (Moglix). Supports image banners, color slides, text overlays, dots navigation, and an animated progress bar.\n\n---\n\n## 📦 Installation\n\nInstall with npm:\n\n```bash\nnpm install @atom-design-mog/moglix-carousel\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/moglix-carousel\n```\n\n---\n\n## 🚀 Basic Usage\n\n```javascript\nimport MoglixCarousel from '@atom-design-mog/moglix-carousel';\n\nexport default function Home() {\n  const slides = [\n    { content: 'Welcome To Moglix', background: '#d9232d' },\n    { background: 'https://cdn.moglix.com/banner1.png' },\n    { background: 'https://cdn.moglix.com/banner2.png' },\n    { content: 'Thank You!', background: '#d9232d' },\n  ];\n\n  return (\n    <MoglixCarousel slides={slides} autoPlay autoPlayInterval={3000} />\n  );\n}\n```\n\n---\n\n## 🎞 Slide Format\n\nEach slide supports either a solid color or an image background.\n\nColor slide example:\n\n```js\n{ content: 'Welcome', background: '#d9232d' }\n```\n\nImage slide example:\n\n```js\n{ background: 'https://cdn.moglix.com/cms/your-image.png', content: 'Big Sale!' }\n```\n\n---\n\n## 🧩 Component Props\n\n| Prop                 | Type      | Default | Description                                  |\n| -------------------- | --------- | ------- | -------------------------------------------- |\n| **slides**           | `Array`   | `[]`    | List of slides (image/color + optional text) |\n| **autoPlay**         | `boolean` | `true`  | Enables automatic sliding                    |\n| **autoPlayInterval** | `number`  | `3000`  | Time (ms) before moving to next slide        |\n\n\n---\n\n## ✨ Features\n\n- Auto-play with smooth transitions\n- Looping carousel behavior\n- Touch-enabled (swipe left / right)\n- Animated progress bar per slide\n- Dots navigation with active state\n- Supports image banners and solid color slides\n- Text overlay on images\n- Fully responsive and adapts to device width\n- Works inside or outside `ScrollView`\n\n---\n\n## 🧪 Test Screen Example\n\n```javascript\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport MoglixCarousel from '@atom-design-mog/moglix-carousel';\n\nexport default function TestCarouselScreen() {\n  const slides = [\n    { content: 'Welcome To Moglix', background: '#d9232d' },\n    { background: 'https://cdn.moglix.com/cms/flyout/Image_2025-11-17_12:26:40.392_Konica_Minolta_Platinum_pwa1.png' },\n    { background: 'https://cdn.moglix.com/cms/flyout/Image_2025-11-17_12:24:49.838_Singhal-Platinum-pwa.png' },\n    { background: 'https://cdn.moglix.com/cms/flyout/Image_2025-11-17_12:26:41.002_vinspire_Platinum_pwa1.png' },\n    { content: 'Thank You!', background: '#d9232d' },\n  ];\n\n  return (\n    <View style={{ flex: 1, backgroundColor: '#fff' }}>\n      <View style={{ padding: 16 }}>\n        <Text style={{ fontSize: 18, fontWeight: '600' }}>Carousel Component</Text>\n      </View>\n\n      <MoglixCarousel slides={slides} autoPlay autoPlayInterval={3000} />\n\n      <View style={{ padding: 16 }}>\n        <Text>Below Carousel Content...</Text>\n      </View>\n    </View>\n  );\n}\n```\n\n---\n\n## 📁 Slide Object Structure\n\n```ts\ntype Slide = {\n  background: string; // Image URL OR Color like '#d9232d'\n  content?: string;   // Optional overlay text\n}\n```\n\n---\n\n## 📸 Notes\n\n- Supports JPG / PNG / WebP banners and full-width images. The component calculates height from device width for consistent aspect ratio.\n- If you need different aspect ratios or custom slide heights, wrap the component or modify styles as needed.\n\n---\n\n## 👤 Author\n\nAvi Gupta\n","readmeFilename":"README.md"}