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

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

Usage

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:

: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