npm package: @souravlahoti/testimonial-slider-pro
Description: A beautiful, responsive, and customizable testimonial slider/carousel component for React applications
Author: Sourav Lahoti
Latest version: 1.0.0

# Testimonial Slider Pro

A beautiful, responsive, and customizable testimonial slider/carousel component for React applications.

## Features

- 🎨 Fully customizable styling with CSS variables
- 🚀 Smooth animations and transitions
- 📱 Responsive design that works on all devices
- ⚡ TypeScript support out of the box
- 🎭 Multiple animation effects
- 🛠️ Easy to integrate and customize
- ⏯️ Auto-advance with pause on hover
- 🎨 Custom progress bar

## Installation

```bash
npm install @souravlahoti/testimonial-slider-pro
# or
yarn add @souravlahoti/testimonial-slider-pro
```

## Usage

```tsx
import React from "react";
import TestimonialSlider from "@souravlahoti/testimonial-slider-pro";
import "@souravlahoti/testimonial-slider-pro/dist/styles.css";

const App = () => {
  const testimonials = [
    {
      name: "Sarah Johnson",
      image: "https://i.pravatar.cc/150?img=3",
      message:
        "This product has completely transformed how I manage my daily tasks!",
    },
    // Add more testimonials...
  ];

  return (
    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
      <h1>What Our Customers Say</h1>
      <TestimonialSlider
        testimonials={testimonials}
        duration={5000}
        progressBarColor="#2c3e50"
      />
    </div>
  );
};

export default App;
```

## Props

| Prop               | Type                                                    | Default     | Description                              |
| ------------------ | ------------------------------------------------------- | ----------- | ---------------------------------------- |
| `testimonials`     | `Array<{name: string, image: string, message: string}>` | `[]`        | Array of testimonial objects             |
| `duration`         | `number`                                                | `5000`      | Duration (in ms) between slides          |
| `progressBarColor` | `string`                                                | `"#3b82f6"` | Color of the progress bar                |
| `backgroundColor`  | `string`                                                | Gradient    | Background style of the slider           |
| `autoAdvance`      | `boolean`                                               | `true`      | Auto-advance to next slide               |
| `pauseOnHover`     | `boolean`                                               | `true`      | Pause auto-advance on hover              |
| `onViewAll`        | `() => void`                                            | -           | Callback when view all button is clicked |
| `className`        | `string`                                                | -           | Additional CSS class name                |
| `style`            | `CSSProperties`                                         | -           | Inline styles                            |

## Styling

You can customize the appearance using CSS variables:

```css
:root {
  --progress-bar-color: #2c3e50;
  --background: linear-gradient(145deg, #f8f9fa, #e9ecef);
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}
```

## License

Commercial use requires a license. Please contact the author for licensing information.

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## Author

Sourav Lahoti

## Version

1.0.0