https://github.com/teneplaysofficial/react-slideshow
A lightweight, customizable, and responsive slideshow component for React.
https://github.com/teneplaysofficial/react-slideshow
animation carousel-component javascript react-slideshow-image reponsive typescript ui-component
Last synced: 3 months ago
JSON representation
A lightweight, customizable, and responsive slideshow component for React.
- Host: GitHub
- URL: https://github.com/teneplaysofficial/react-slideshow
- Owner: TenEplaysOfficial
- License: mit
- Created: 2025-04-06T19:18:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-17T13:06:31.000Z (about 1 year ago)
- Last Synced: 2025-04-17T22:30:45.032Z (about 1 year ago)
- Topics: animation, carousel-component, javascript, react-slideshow-image, reponsive, typescript, ui-component
- Language: TypeScript
- Homepage: https://teneplaysofficial.github.io/react-slideshow/?path=/story/image-slideshow-demo--default
- Size: 3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# [React Slideshow](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs)
[](https://www.npmjs.com/package/@tenedev/react-slideshow)
[](https://www.npmjs.com/package/@tenedev/react-slideshow)
[](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/introduction--docs)
[](https://github.com/TenEplaysOfficial/react-slideshow/pulls)
[](https://github.com/TenEplaysOfficial/react-slideshow)
[](https://github.com/TenEplaysOfficial/react-slideshow/issues)
[](https://github.com/TenEplaysOfficial/react-slideshow)
A 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.
## 🗂️ Table of Contents
- [🚀 Installation](#-installation)
- [📦 Usage](#-usage)
- [⚙️ Props](#️-props)
- [🎨 Customization](#-customization)
- [Custom Buttons](#custom-buttons)
- [📘 Example](#-example)
- [🛠️ Contributing](#️-contributing)
- [📜 License](#-license)
## 🚀 Installation
```bash
npm install @tenedev/react-slideshow
# or
yarn add @tenedev/react-slideshow
```
## 📦 Usage
```tsx
import React from 'react';
import Slide from '@tenedev/react-slideshow';
// or
import { Slide } from '@tenedev/react-slideshow';
const images = [
'https://source.unsplash.com/random/800x400?sig=1',
'https://source.unsplash.com/random/800x400?sig=2',
'https://source.unsplash.com/random/800x400?sig=3',
];
export default function App() {
return (
console.log('Slide:', i)}
/>
);
}
```
## ⚙️ Props
| Prop | Type | Default | Description |
| -------------------- | ------------------------------------------------------------------- | ----------------------- | --------------------------------------------- |
| `images` | `Array` | **Required** | Array of image URLs or objects with alt text. |
| `duration` | `number` | `3000` | Time (ms) between auto transitions. |
| `autoSwitch` | `boolean` | `true` | Enable auto switching between slides. |
| `infiniteLoop` | `boolean` | `true` | Loop slideshow infinitely. |
| `animation` | `"slide"` \| `"fade"` | `"slide"` | Transition type. |
| `onSlideChange` | `(index: number) => void` | `undefined` | Callback on slide change. |
| `buttonPosition` | `"overlay"` \| `"bottom"` | `"overlay"` | Position of navigation buttons. |
| `customButton` | `{ left?: string \| ReactElement; right?: string \| ReactElement }` | Arrows from `getIcon()` | Custom navigation buttons. |
| `hideButton` | `boolean` | `false` | Hide navigation buttons. |
| `showIndicators` | `boolean` | `false` | Show small indicators for each slide. |
| `defaultImageIndex` | `number` | `0` | Starting slide index. |
| `pauseOnHover` | `boolean` | `false` | Pause auto-switching on hover. |
| `transitionDuration` | `number` | `700` | Duration of transition animation in ms. |
## 🎨 Customization
### Custom Buttons
```tsx
```
## 📘 Example
Here’s a complete working example in React for more visit [Live](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs):
```tsx
import React from 'react';
import Slide from '@tenedev/react-slideshow';
//or
import { Slide } from '@tenedev/react-slideshow';
const App = () => {
const slides = [
'/images/slide1.jpg',
'/images/slide2.jpg',
'/images/slide3.jpg',
];
return (
);
};
export default App;
```
## 🛠️ Contributing
We welcome contributions from the community!
If 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.
Let's make `@tenedev/react-slideshow` better together!
## 📜 License
This project is licensed under the [MIT License](LICENSE).
Copyright © [TenEplaysOfficial](https://github.com/TenEplaysOfficial)