React Showcase Sliders

A modern, customizable React slider with thumbnails, autoplay, and smooth animations. Built with performance and simplicity in mind.

Features

• Autoplay support (with delay control)
• Thumbnail navigation (click to slide)
• Fully responsive (desktop / tablet / mobile)
• Built-in animations (fade, zoom, text reveal)
• Lightweight & fast
• No external animation libraries required
• Easy to customize

Installation

npm install react-showcase-sliders

Usage

import { Slider } from "react-showcase-sliders";

const slides = [
  {
    id: 1,
    image: "/tour-1.jpg",
    title: "COX'S BAZAR",
    description: "World’s longest sea beach with stunning views.",
  },
  {
    id: 2,
    image: "/tour-2.jpg",
    title: "SAINT MARTIN",
    description: "Beautiful coral island with crystal clear water.",
  },
];

export default function App() {
  return (
    <Slider
      slides={slides}
      autoPlay
      delay={3000}
      animation="fade"
      visibleCount={{ desktop: 3, tablet: 2 }}
    />
  );
}

Slide Data Structure

Each slide object must follow this format:

type SlideType = {
  id: number;
  image: string;
  title: string;
  description: string;
};

Props

| Prop | Type | Default | Description | | -------------- | ----------------------------------------------------- | ------------ | -------------------------------------------- | | slides | SlideType[] | required | Array of slide objects | | autoPlay | boolean | false | Enable/disable autoplay | | delay | number | 3000 | Autoplay delay (ms) | | animation | "fade" \| "zoom" \| "none" | "none" | Slide transition animation | | visibleCount | { desktop: number; tablet: number; mobile: number } | {3,2,1} | Number of thumbnails visible per screen size |

Responsive Control

You can control how many thumbnails are visible on different devices:

<Slider
  slides={slides}
  visibleCount={{
    desktop: 4,
    tablet: 2,
  }}
/>

Controls

• Click thumbnails to navigate
• Use left/right arrows
• Hover to pause autoplay
• Smooth animated transitions

Notes

• No external dependencies like framer-motion
• Works with React (JS & TS)

Author

Raju Molla

License

MIT License

Support

If you like this project, consider giving it a ⭐ on GitHub! Github