React Roots Carousel

A beautiful and customizable React carousel component with Material-UI integration.

Installation

npm install @your-scope/react-roots-carousel

Usage

import { OurRootsCarousel } from '@your-scope/react-roots-carousel';

const images = [
  {
    src: 'https://example.com/image1.jpg',
    name: 'Image 1',
    Title: 'Title 1',
    Title1: 'Subtitle 1'
  },
  // ... more images
];

function App() {
  return (
    <OurRootsCarousel 
      images={images}
      interval={3000} // Optional: auto-scroll interval in milliseconds
      customStyles={{  // Optional: override default styles
        section: { /* ... */ },
        title: { /* ... */ },
        // ... more style overrides
      }}
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | images | Array<{ src: string; name: string; Title: string; Title1: string; }> | Yes | Array of image objects | | interval | number | No | Auto-scroll interval in milliseconds (default: 3000) | | customStyles | object | No | Custom styles for different components |

Features

• Smooth animations
• Responsive design
• Customizable styles
• Auto-scroll functionality
• Intersection Observer integration
• Material-UI integration

License

MIT