A customizable and interactive carousel component built with React and Next.js. It allows you to display a rotating carousel of images with various styling options. The component supports server-side rendering (SSR) for improved performance and SEO.
The Fancy Carousel component supports server-side rendering (SSR) with Next.js, enabling improved performance and SEO benefits. Ensure that you configure your Next.js application to utilize SSR for rendering the Fancy Carousel component.
- Dynamic image rotation and focus element
- Customizable carousel styling and dimensions
- Configurable auto-rotate functionality
- Navigation buttons for manual rotation
- Supports both peripheral and central images
-
Clone the repository:
git clone https://github.com/your-username/fancy-carousel.git
-
Install the dependencies:
npm install
-
Start the development server:
npm run dev
-
Access the carousel component in your browser at
http://localhost:3000
.
Import the FancyCarousel
component and pass the required props:
import React from 'react';
import FancyCarousel from './components/FancyCarousel';
const images = [
'/path/to/image1.jpg',
'/path/to/image2.jpg',
'/path/to/image3.jpg',
// Add more image paths as needed
];
const MyComponent = () => {
return (
<div>
<h1>My Fancy Carousel</h1>
<FancyCarousel images={images} />
</div>
);
};
export default MyComponent;
Ensure that you wrap your Next.js pages with the necessary components and configure the appropriate data fetching methods.
images
: An array of image paths to be displayed in the carousel.- Add more props and their descriptions as needed.
For a complete list of available props and their configurations, refer to the component code.
This project is licensed under the MIT License.
Please copy and paste this Markdown-formatted README into your project's README file.