{"id":28087731,"url":"https://github.com/teneplaysofficial/react-slideshow","last_synced_at":"2026-02-25T08:13:10.827Z","repository":{"id":287216872,"uuid":"961566139","full_name":"TenEplaysOfficial/react-slideshow","owner":"TenEplaysOfficial","description":"A lightweight, customizable, and responsive slideshow component for React.","archived":false,"fork":false,"pushed_at":"2025-04-17T13:06:31.000Z","size":3145,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-17T22:30:45.032Z","etag":null,"topics":["animation","carousel-component","javascript","react-slideshow-image","reponsive","typescript","ui-component"],"latest_commit_sha":null,"homepage":"https://teneplaysofficial.github.io/react-slideshow/?path=/story/image-slideshow-demo--default","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TenEplaysOfficial.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"patreon":"teneplays"}},"created_at":"2025-04-06T19:18:26.000Z","updated_at":"2025-04-17T13:05:18.000Z","dependencies_parsed_at":"2025-04-12T04:31:06.319Z","dependency_job_id":null,"html_url":"https://github.com/TenEplaysOfficial/react-slideshow","commit_stats":null,"previous_names":["teneplaysofficial/react-slideshow"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TenEplaysOfficial%2Freact-slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TenEplaysOfficial%2Freact-slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TenEplaysOfficial%2Freact-slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TenEplaysOfficial%2Freact-slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TenEplaysOfficial","download_url":"https://codeload.github.com/TenEplaysOfficial/react-slideshow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253937159,"owners_count":21987295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","carousel-component","javascript","react-slideshow-image","reponsive","typescript","ui-component"],"created_at":"2025-05-13T11:42:57.757Z","updated_at":"2026-02-25T08:13:04.910Z","avatar_url":"https://github.com/TenEplaysOfficial.png","language":"TypeScript","funding_links":["https://patreon.com/teneplays"],"categories":[],"sub_categories":[],"readme":"# [React Slideshow](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs)\n\n\u003cdiv class=\"badge-wrapper\"\u003e\n\n[![npm](https://img.shields.io/npm/v/@tenedev/react-slideshow?color=blue\u0026label=NPM\u0026logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/@tenedev/react-slideshow)\n[![downloads](https://img.shields.io/npm/dt/@tenedev/react-slideshow?color=blue\u0026label=Downloads\u0026logo=archive\u0026style=flat-square)](https://www.npmjs.com/package/@tenedev/react-slideshow)\n![size](https://img.shields.io/bundlephobia/minzip/@tenedev/react-slideshow?style=flat-square\u0026label=Size\u0026logo=webpack\u0026color=blue)\n![maintenance](https://img.shields.io/maintenance/active/2025?style=flat-square\u0026label=Maintained\u0026logo=calendar\u0026color=blue)\n![Node.js](https://img.shields.io/badge/Node.js-%3E%3D16-blue?logo=node.js\u0026style=flat-square)\n[![Storybook](https://img.shields.io/badge/Storybook-Live%20Docs-blue?logo=storybook\u0026style=flat-square)](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/introduction--docs)\n[![contribute](https://img.shields.io/badge/Contribute-Open%20PRs-blue?style=flat-square\u0026logo=git)](https://github.com/TenEplaysOfficial/react-slideshow/pulls)\n[![stars](https://img.shields.io/github/stars/TenEplaysOfficial/react-slideshow?style=flat-square\u0026label=Stars\u0026logo=github)](https://github.com/TenEplaysOfficial/react-slideshow)\n![forks](https://img.shields.io/github/forks/TenEplaysOfficial/react-slideshow?style=flat-square\u0026label=Forks\u0026logo=github)\n[![issues](https://img.shields.io/github/issues/TenEplaysOfficial/react-slideshow?style=flat-square\u0026label=Issues\u0026logo=github\u0026color=blue)](https://github.com/TenEplaysOfficial/react-slideshow/issues)\n[![last commit](https://img.shields.io/github/last-commit/TenEplaysOfficial/react-slideshow?style=flat-square\u0026label=Last%20Commit\u0026logo=github\u0026color=blue)](https://github.com/TenEplaysOfficial/react-slideshow)\n![workflow](https://img.shields.io/github/actions/workflow/status/TenEplaysOfficial/react-slideshow/publish.yml?style=flat-square\u0026label=Build\u0026logo=githubactions\u0026color=blue)\n![license](https://img.shields.io/github/license/TenEplaysOfficial/react-slideshow?style=flat-square\u0026label=License\u0026logo=open-source-initiative\u0026color=blue)\n\n\u003c/div\u003e\n\nA lightweight, customizable, and responsive slideshow component for React. Supports auto image switching, infinite looping, custom navigation buttons, and flexible styling positions. Perfect for modern React applications that need a smooth and clean slideshow experience.\n\n## 🗂️ Table of Contents\n\n- [🚀 Installation](#-installation)\n- [📦 Usage](#-usage)\n- [⚙️ Props](#️-props)\n- [🎨 Customization](#-customization)\n  - [Custom Buttons](#custom-buttons)\n- [📘 Example](#-example)\n- [🛠️ Contributing](#️-contributing)\n- [📜 License](#-license)\n\n## 🚀 Installation\n\n```bash\nnpm install @tenedev/react-slideshow\n# or\nyarn add @tenedev/react-slideshow\n```\n\n## 📦 Usage\n\n```tsx\nimport React from 'react';\nimport Slide from '@tenedev/react-slideshow';\n// or\nimport { Slide } from '@tenedev/react-slideshow';\n\nconst images = [\n  'https://source.unsplash.com/random/800x400?sig=1',\n  'https://source.unsplash.com/random/800x400?sig=2',\n  'https://source.unsplash.com/random/800x400?sig=3',\n];\n\nexport default function App() {\n  return (\n    \u003cSlide\n      images={images}\n      duration={3000}\n      autoSwitch\n      infiniteLoop\n      buttonPosition=\"overlay\"\n      showIndicators\n      pauseOnHover\n      animation=\"slide\"\n      onSlideChange={(i) =\u003e console.log('Slide:', i)}\n    /\u003e\n  );\n}\n```\n\n## ⚙️ Props\n\n| Prop                 | Type                                                                | Default                 | Description                                   |\n| -------------------- | ------------------------------------------------------------------- | ----------------------- | --------------------------------------------- |\n| `images`             | `Array\u003cstring \\| { url: string; alt?: string }\u003e`                    | **Required**            | Array of image URLs or objects with alt text. |\n| `duration`           | `number`                                                            | `3000`                  | Time (ms) between auto transitions.           |\n| `autoSwitch`         | `boolean`                                                           | `true`                  | Enable auto switching between slides.         |\n| `infiniteLoop`       | `boolean`                                                           | `true`                  | Loop slideshow infinitely.                    |\n| `animation`          | `\"slide\"` \\| `\"fade\"`                                               | `\"slide\"`               | Transition type.                              |\n| `onSlideChange`      | `(index: number) =\u003e void`                                           | `undefined`             | Callback on slide change.                     |\n| `buttonPosition`     | `\"overlay\"` \\| `\"bottom\"`                                           | `\"overlay\"`             | Position of navigation buttons.               |\n| `customButton`       | `{ left?: string \\| ReactElement; right?: string \\| ReactElement }` | Arrows from `getIcon()` | Custom navigation buttons.                    |\n| `hideButton`         | `boolean`                                                           | `false`                 | Hide navigation buttons.                      |\n| `showIndicators`     | `boolean`                                                           | `false`                 | Show small indicators for each slide.         |\n| `defaultImageIndex`  | `number`                                                            | `0`                     | Starting slide index.                         |\n| `pauseOnHover`       | `boolean`                                                           | `false`                 | Pause auto-switching on hover.                |\n| `transitionDuration` | `number`                                                            | `700`                   | Duration of transition animation in ms.       |\n\n## 🎨 Customization\n\n### Custom Buttons\n\n```tsx\n\u003cSlide\n  images={images}\n  customButton={{\n    left: '◀',\n    right: '▶',\n  }}\n/\u003e\n```\n\n## 📘 Example\n\nHere’s a complete working example in React for more visit [Live](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs):\n\n```tsx\nimport React from 'react';\nimport Slide from '@tenedev/react-slideshow';\n//or\nimport { Slide } from '@tenedev/react-slideshow';\n\nconst App = () =\u003e {\n  const slides = [\n    '/images/slide1.jpg',\n    '/images/slide2.jpg',\n    '/images/slide3.jpg',\n  ];\n\n  return (\n    \u003cdiv className=\"mx-auto mt-8 w-full max-w-2xl\"\u003e\n      \u003cSlide images={slides} duration={5000} autoSwitch infiniteLoop button /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## 🛠️ Contributing\n\nWe welcome contributions from the community!\n\nIf you have ideas, suggestions, or bug reports, feel free to [open an issue](https://github.com/TenEplaysOfficial/react-slideshow/issues) or [submit a pull request](https://github.com/TenEplaysOfficial/react-slideshow/pulls) on GitHub.\n\nLet's make `@tenedev/react-slideshow` better together!\n\n## 📜 License\n\nThis project is licensed under the [MIT License](LICENSE).  \nCopyright © [TenEplaysOfficial](https://github.com/TenEplaysOfficial)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteneplaysofficial%2Freact-slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteneplaysofficial%2Freact-slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteneplaysofficial%2Freact-slideshow/lists"}