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
• 📦 Usage
• ⚙️ Props
• 🎨 Customization
  • Custom Buttons
• 📘 Example
• 🛠️ Contributing
• 📜 License

🚀 Installation

npm install @tenedev/react-slideshow
# or
yarn add @tenedev/react-slideshow

📦 Usage

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 (
    <Slide
      images={images}
      duration={3000}
      autoSwitch
      infiniteLoop
      buttonPosition="overlay"
      showIndicators
      pauseOnHover
      animation="slide"
      onSlideChange={(i) => console.log('Slide:', i)}
    />
  );
}

⚙️ Props

| Prop | Type | Default | Description | | -------------------- | ------------------------------------------------------------------- | ----------------------- | --------------------------------------------- | | images | Array<string \| { url: string; alt?: string }> | 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

<Slide
  images={images}
  customButton={{
    left: '◀',
    right: '▶',
  }}
/>

📘 Example

Here’s a complete working example in React for more visit Live:

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 (
    <div className="mx-auto mt-8 w-full max-w-2xl">
      <Slide images={slides} duration={5000} autoSwitch infiniteLoop button />
    </div>
  );
};

export default App;

🛠️ Contributing

We welcome contributions from the community!

If you have ideas, suggestions, or bug reports, feel free to open an issue or submit a pull request on GitHub.

Let's make @tenedev/react-slideshow better together!

📜 License

This project is licensed under the MIT License.
Copyright © TenEplaysOfficial