{"_id":"@atomictemplate/slider","_rev":"3-ab1c7284f9731cfb0395339e0ef0688e","name":"@atomictemplate/slider","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@atomictemplate/slider","version":"1.0.0","keywords":["react","slider","carousel","gsap","marquee","swiper","accessibility","typescript"],"author":{"url":"https://github.com/nomanjawad","name":"Noman Jawad","email":"nomanzawad@gmail.com"},"license":"MIT","_id":"@atomictemplate/slider@1.0.0","maintainers":[{"name":"nomanzawad","email":"nomanzawad@gmail.com"}],"homepage":"https://github.com/nomanjawad/atomictemplate/tree/main/packages/slider#readme","bugs":{"url":"https://github.com/nomanjawad/atomictemplate/issues"},"dist":{"shasum":"872b587945fb5021684d7cb5f006a4c454b057bb","tarball":"https://registry.npmjs.org/@atomictemplate/slider/-/slider-1.0.0.tgz","fileCount":12,"integrity":"sha512-oHOIDNPXqe/syPTl1nJw123cMk4b2oBGu9fqH7IAPbk1Fyc2M8QX04NapDZT7BS62VYRa25sgeVeEsgVdCrflQ==","signatures":[{"sig":"MEUCIQCVCyPdkrNnQv+zJba9UUVJiFKG4BQIrUWBn1uCgWXvXQIgLoRnL5f5mgPV9PL1D788vtEJArHCBqBLjreIIqvZ2cg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":230652},"main":"./dist/index.js","type":"module","_from":"file:atomictemplate-slider-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/slider.module.css","./styles.css":"./dist/slider.module.css"},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"nomanzawad","email":"nomanzawad@gmail.com"},"_resolved":"/private/var/folders/j1/0v50fh3x04lb_0nwhnkyf9s00000gn/T/a1b5671596c3047bb3b754044f26c7b2/atomictemplate-slider-1.0.0.tgz","_integrity":"sha512-oHOIDNPXqe/syPTl1nJw123cMk4b2oBGu9fqH7IAPbk1Fyc2M8QX04NapDZT7BS62VYRa25sgeVeEsgVdCrflQ==","repository":{"url":"git+https://github.com/nomanjawad/atomictemplate.git","type":"git","directory":"packages/slider"},"_npmVersion":"10.9.3","description":"A fully customizable React slider/carousel with GSAP animations, marquee mode, and accessibility features","directories":{},"_nodeVersion":"22.19.0","dependencies":{"gsap":"^3.13.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.3","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/slider_1.0.0_1764930827975_0.47290198217020585","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atomictemplate/slider","version":"1.0.1","keywords":["react","slider","carousel","gsap","marquee","swiper","accessibility","typescript"],"author":{"url":"https://github.com/nomanjawad","name":"Noman Jawad","email":"nomanzawad@gmail.com"},"license":"MIT","_id":"@atomictemplate/slider@1.0.1","maintainers":[{"name":"nomanzawad","email":"nomanzawad@gmail.com"}],"homepage":"https://github.com/nomanjawad/atomictemplate/tree/main/packages/slider#readme","bugs":{"url":"https://github.com/nomanjawad/atomictemplate/issues"},"dist":{"shasum":"8295513e8c123327e08b331ef864914022f90a67","tarball":"https://registry.npmjs.org/@atomictemplate/slider/-/slider-1.0.1.tgz","fileCount":12,"integrity":"sha512-RQyPUGYq+2vG9EMTVS9wVaEnr4xiq+aux8fIuc3DDbimOcdpDM+6/xS692jseejWSfQGs19gdDlM5+8rHaNIpg==","signatures":[{"sig":"MEUCIQC0dXxppU5OVUgHKpe77cyaupWM48RnsMZQ76ElvXJeawIgR6Ra7IhJFI6gvoikSWUvxKn69y2Cd7ZboobjerZTOuA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":230656},"main":"./dist/index.cjs","type":"module","_from":"file:atomictemplate-slider-1.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":"./dist/slider.module.css","./styles.css":"./dist/slider.module.css"},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"nomanzawad","email":"nomanzawad@gmail.com"},"_resolved":"/private/var/folders/j1/0v50fh3x04lb_0nwhnkyf9s00000gn/T/a0a5811f17d3731f67b50406c203dc74/atomictemplate-slider-1.0.1.tgz","_integrity":"sha512-RQyPUGYq+2vG9EMTVS9wVaEnr4xiq+aux8fIuc3DDbimOcdpDM+6/xS692jseejWSfQGs19gdDlM5+8rHaNIpg==","repository":{"url":"git+https://github.com/nomanjawad/atomictemplate.git","type":"git","directory":"packages/slider"},"_npmVersion":"10.9.3","description":"A fully customizable React slider/carousel with GSAP animations, marquee mode, and accessibility features","directories":{},"_nodeVersion":"22.19.0","dependencies":{"gsap":"^3.13.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.3","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/slider_1.0.1_1764931220675_0.23418402897374802","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@atomictemplate/slider","version":"1.0.2","description":"A fully customizable React slider/carousel with GSAP animations, marquee mode, and accessibility features","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":"./dist/slider.module.css","./styles.css":"./dist/slider.module.css"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","clean":"rm -rf dist"},"keywords":["react","slider","carousel","gsap","marquee","swiper","accessibility","typescript"],"author":{"name":"Noman Jawad","email":"nomanzawad@gmail.com","url":"https://github.com/nomanjawad"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/nomanjawad/atomictemplate.git","directory":"packages/slider"},"homepage":"https://github.com/nomanjawad/atomictemplate/tree/main/packages/slider#readme","bugs":{"url":"https://github.com/nomanjawad/atomictemplate/issues"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"gsap":"^3.13.0"},"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.0.0","typescript":"^5.9.3"},"_id":"@atomictemplate/slider@1.0.2","gitHead":"5d8eea62bebcbbce42c9ba9388a2b31592ba6fbe","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-hSIGaZmWlFlscgmIOM+NwaD8JwQ4g4ThW2GdwPgdNp+Jwtp1S8zmngqtRQy81676WT3XfiS1Qt4kLX66wwJuFg==","shasum":"ad984507ec1f6f16a73e9ded54793858bf3326a3","tarball":"https://registry.npmjs.org/@atomictemplate/slider/-/slider-1.0.2.tgz","fileCount":11,"unpackedSize":229589,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGE3kWL2oGKm03O9EH+vO1oZGrJNlqtvhkmqkmSQipguAiEA0A1B8nPGGGLef779uRDOyPS/3C0o4F46Fi/NsA96zRE="}]},"_npmUser":{"name":"nomanzawad","email":"nomanzawad@gmail.com"},"directories":{},"maintainers":[{"name":"nomanzawad","email":"nomanzawad@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/slider_1.0.2_1764931878258_0.8142410159358939"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-05T10:33:47.912Z","modified":"2025-12-05T10:51:18.706Z","1.0.0":"2025-12-05T10:33:48.215Z","1.0.1":"2025-12-05T10:40:20.826Z","1.0.2":"2025-12-05T10:51:18.415Z"},"bugs":{"url":"https://github.com/nomanjawad/atomictemplate/issues"},"author":{"name":"Noman Jawad","email":"nomanzawad@gmail.com","url":"https://github.com/nomanjawad"},"license":"MIT","homepage":"https://github.com/nomanjawad/atomictemplate/tree/main/packages/slider#readme","keywords":["react","slider","carousel","gsap","marquee","swiper","accessibility","typescript"],"repository":{"type":"git","url":"git+https://github.com/nomanjawad/atomictemplate.git","directory":"packages/slider"},"description":"A fully customizable React slider/carousel with GSAP animations, marquee mode, and accessibility features","maintainers":[{"name":"nomanzawad","email":"nomanzawad@gmail.com"}],"readme":"# @atomictemplate/slider\n\n> A fully customizable React slider/carousel with GSAP animations, lazy loading, accessibility, and marquee mode.\n\n[![npm version](https://img.shields.io/npm/v/@atomictemplate/slider.svg)](https://www.npmjs.com/package/@atomictemplate/slider)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-blue)](https://www.typescriptlang.org/)\n\n## Features\n\n- 🖼️ **Lazy Loading** - IntersectionObserver-based lazy loading for optimal performance\n- ⌨️ **Keyboard Navigation** - Full keyboard support (Arrow keys, Home, End, PageUp, PageDown)\n- ♿ **Accessibility** - ARIA labels, roles, and screen reader support\n- 🎬 **Media Support** - Images, videos, GIFs, and Lottie animations\n- 📱 **Responsive** - Configurable breakpoints for different screen sizes\n- 🔄 **Marquee Mode** - Smooth infinite scrolling animation\n- 🎨 **Render Props** - Full customization via `renderSlide`, `renderImage`, `renderArrow`, `renderDot`\n- 🚀 **GSAP Powered** - Smooth, performant animations\n- 📦 **Framework Agnostic** - Works with Next.js, Vite, CRA, Remix, etc.\n- 🎯 **TypeScript** - Full type definitions included\n\n## Installation\n\n```bash\n# npm\nnpm install @atomictemplate/slider gsap\n\n# pnpm\npnpm add @atomictemplate/slider gsap\n\n# yarn\nyarn add @atomictemplate/slider gsap\n```\n\n## Quick Start\n\n```tsx\nimport { Slider } from \"@atomictemplate/slider\"\n\nconst slides = [\n  {\n    id: 1,\n    media: {\n      type: \"image\",\n      src: \"/images/slide1.jpg\",\n      alt: \"Slide 1\",\n    },\n  },\n  {\n    id: 2,\n    media: {\n      type: \"image\",\n      src: \"/images/slide2.jpg\",\n      alt: \"Slide 2\",\n    },\n  },\n]\n\nfunction App() {\n  return (\n    <Slider\n      items={slides}\n      options={{\n        slidesToShow: 3,\n        gap: 24,\n        autoplay: { enabled: true, delay: 3000 },\n        loop: true,\n      }}\n    />\n  )\n}\n```\n\n## Usage with Next.js Image\n\nUse the `renderImage` prop to integrate with Next.js Image component:\n\n```tsx\nimport { Slider, type ImageRenderProps } from \"@atomictemplate/slider\"\nimport Image from \"next/image\"\n\nconst renderNextImage = (props: ImageRenderProps) => (\n  <Image\n    src={props.src}\n    alt={props.alt}\n    width={props.width ?? 800}\n    height={props.height ?? 600}\n    className={props.className}\n    style={{ objectFit: \"cover\" }}\n  />\n)\n\nfunction App() {\n  return (\n    <Slider\n      items={slides}\n      renderImage={renderNextImage}\n      options={{ slidesToShow: 2 }}\n    />\n  )\n}\n```\n\n## API Reference\n\n### SliderProps\n\n| Prop           | Type            | Default           | Description                                     |\n| -------------- | --------------- | ----------------- | ----------------------------------------------- |\n| `items`        | `SlideItem[]`   | `[]`              | Array of slide items                            |\n| `children`     | `ReactNode`     | -                 | Alternative to items - pass React children      |\n| `options`      | `SliderOptions` | `DEFAULT_OPTIONS` | Slider configuration                            |\n| `className`    | `string`        | -                 | Custom class for container                      |\n| `style`        | `CSSProperties` | -                 | Custom styles for container                     |\n| `renderSlide`  | `SlideRenderer` | -                 | Custom slide renderer                           |\n| `renderImage`  | `ImageRenderer` | -                 | Custom image renderer (for Next.js Image, etc.) |\n| `renderArrow`  | `Function`      | -                 | Custom arrow renderer                           |\n| `renderDot`    | `Function`      | -                 | Custom dot renderer                             |\n| `initialSlide` | `number`        | `0`               | Initial slide index                             |\n| `id`           | `string`        | -                 | Unique ID for accessibility                     |\n\n### SliderOptions\n\n```typescript\ninterface SliderOptions {\n  // Display\n  slidesToShow?: number // Default: 1\n  slidesToScroll?: number // Default: 1\n  gap?: number | string // Default: 16\n  centerMode?: boolean // Default: false\n\n  // Navigation\n  pagination?: \"arrows\" | \"dots\" | \"both\" | \"none\" // Default: 'both'\n  arrows?: ArrowOptions\n  dots?: { enabled?: boolean; className?: string }\n\n  // Behavior\n  loop?: boolean // Default: true\n  speed?: number // Transition speed in ms. Default: 500\n  transition?: \"slide\" | \"fade\" | \"none\" // Default: 'slide'\n  draggable?: boolean // Default: true\n\n  // Autoplay\n  autoplay?: {\n    enabled?: boolean // Default: false\n    delay?: number // Default: 3000\n    pauseOnHover?: boolean // Default: true\n    pauseOnInteraction?: boolean // Default: true\n  }\n\n  // Marquee\n  marquee?: {\n    enabled?: boolean // Default: false\n    speed?: number // Duration in seconds. Default: 50\n    pauseOnHover?: boolean // Default: true\n  }\n\n  // Lazy Loading\n  lazyLoad?: {\n    enabled?: boolean // Default: true\n    rootMargin?: string // Default: '200px'\n    threshold?: number // Default: 0\n  }\n\n  // Accessibility\n  a11y?: {\n    enabled?: boolean // Default: true\n    prevSlideMessage?: string\n    nextSlideMessage?: string\n    slideRole?: string\n    containerRole?: string\n  }\n\n  // Keyboard\n  keyboard?: {\n    enabled?: boolean // Default: true\n    onlyInViewport?: boolean // Default: true\n  }\n\n  // Responsive\n  responsive?: {\n    sm?: BreakpointConfig\n    md?: BreakpointConfig\n    lg?: BreakpointConfig\n    xl?: BreakpointConfig\n    \"2xl\"?: BreakpointConfig\n  }\n\n  // Callbacks\n  onInit?: () => void\n  onDestroy?: () => void\n  onSlideChange?: (current: number, prev: number) => void\n  onReachStart?: () => void\n  onReachEnd?: () => void\n}\n```\n\n### SlideItem\n\n```typescript\ninterface SlideItem {\n  id?: string | number\n  media?: MediaSource\n  content?: ReactNode\n  className?: string\n  onClick?: () => void\n}\n\ninterface MediaSource {\n  type: \"image\" | \"video\" | \"gif\" | \"lottie\"\n  src: string\n  alt?: string\n  width?: number\n  height?: number\n  // Video specific\n  poster?: string\n  autoPlay?: boolean\n  muted?: boolean\n  loop?: boolean\n}\n```\n\n### SliderRef (Imperative Handle)\n\n```typescript\ninterface SliderRef {\n  goToSlide: (index: number) => void\n  nextSlide: () => void\n  prevSlide: () => void\n  getCurrentSlide: () => number\n  getTotalSlides: () => number\n  pauseAutoplay: () => void\n  resumeAutoplay: () => void\n}\n```\n\n## Examples\n\n### Basic Slider\n\n```tsx\n<Slider\n  items={slides}\n  options={{\n    slidesToShow: 3,\n    gap: 24,\n    pagination: \"both\",\n  }}\n/>\n```\n\n### Autoplay Slider\n\n```tsx\n<Slider\n  items={slides}\n  options={{\n    slidesToShow: 2,\n    autoplay: {\n      enabled: true,\n      delay: 4000,\n      pauseOnHover: true,\n    },\n    loop: true,\n  }}\n/>\n```\n\n### Marquee Mode (Logo Carousel)\n\n```tsx\n<Slider\n  items={logoItems}\n  options={{\n    gap: 48,\n    marquee: {\n      enabled: true,\n      speed: 30,\n      pauseOnHover: true,\n    },\n  }}\n/>\n```\n\n### Responsive Configuration\n\n```tsx\n<Slider\n  items={slides}\n  options={{\n    slidesToShow: 1,\n    responsive: {\n      md: { slidesToShow: 2, gap: 16 },\n      lg: { slidesToShow: 3, gap: 24 },\n      xl: { slidesToShow: 4, gap: 32 },\n    },\n  }}\n/>\n```\n\n### With Ref Control\n\n```tsx\nimport { useRef } from \"react\"\nimport { Slider, type SliderRef } from \"@atomictemplate/slider\"\n\nfunction App() {\n  const sliderRef = useRef<SliderRef>(null)\n\n  return (\n    <>\n      <Slider ref={sliderRef} items={slides} />\n      <button onClick={() => sliderRef.current?.prevSlide()}>Prev</button>\n      <button onClick={() => sliderRef.current?.nextSlide()}>Next</button>\n    </>\n  )\n}\n```\n\n### Custom Render Props\n\n```tsx\n<Slider\n  items={slides}\n  renderSlide={({ item, index, isActive }) => (\n    <div className={isActive ? \"active\" : \"\"}>\n      <h3>{item.title}</h3>\n      <p>{item.description}</p>\n    </div>\n  )}\n  renderArrow={(direction, onClick, disabled) => (\n    <button onClick={onClick} disabled={disabled}>\n      {direction === \"prev\" ? \"←\" : \"→\"}\n    </button>\n  )}\n  renderDot={(index, isActive, onClick) => (\n    <button onClick={onClick} className={isActive ? \"dot-active\" : \"dot\"} />\n  )}\n/>\n```\n\n### Video Slides\n\n```tsx\nconst videoSlides = [\n  {\n    id: 1,\n    media: {\n      type: 'video',\n      src: '/videos/intro.mp4',\n      poster: '/images/poster.jpg',\n      autoPlay: true,\n      muted: true,\n      loop: true,\n    },\n  },\n]\n\n<Slider items={videoSlides} />\n```\n\n## Styling\n\n### Import CSS\n\n```tsx\n// Option 1: Import in your component\nimport '@atomictemplate/slider/styles.css'\n\n// Option 2: Import in your global CSS\n@import '@atomictemplate/slider/styles.css';\n```\n\n### CSS Classes\n\nThe slider uses CSS Modules internally. You can override styles with your own classes:\n\n```css\n/* Override arrow styles */\n.my-slider [class*=\"arrow\"] {\n  background: #000;\n  color: #fff;\n}\n\n/* Override dot styles */\n.my-slider [class*=\"dot\"] {\n  width: 12px;\n  height: 12px;\n}\n```\n\n## Keyboard Navigation\n\n| Key                | Action         |\n| ------------------ | -------------- |\n| `←` / `ArrowLeft`  | Previous slide |\n| `→` / `ArrowRight` | Next slide     |\n| `Home`             | First slide    |\n| `End`              | Last slide     |\n| `PageUp`           | Previous slide |\n| `PageDown`         | Next slide     |\n\n## Browser Support\n\n- Chrome 90+\n- Firefox 88+\n- Safari 14+\n- Edge 90+\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## Peer Dependencies\n\n- `react` >= 18.0.0\n- `react-dom` >= 18.0.0\n\n## Dependencies\n\n- `gsap` >= 3.12.0\n\n## License\n\nMIT © [Noman Jawad](https://github.com/nomanjawad)\n\n## Links\n\n- [GitHub Repository](https://github.com/nomanjawad/atomictemplate/tree/main/packages/slider)\n- [Report Issues](https://github.com/nomanjawad/atomictemplate/issues)\n- [Changelog](https://github.com/nomanjawad/atomictemplate/blob/main/packages/slider/CHANGELOG.md)\n","readmeFilename":"README.md"}