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