Gradiolex Tailwind Carousel

A stunning, dynamic image carousel component built with React JS and Tailwind CSS. This component allows you to easily showcase a visually appealing slideshow of images in your web applications with seamless image transitions and a sleek, modern design.

🌟 Features

• Seamless Transitions: Smooth image sliding animations.
• Modern Design: Styled beautifully using Tailwind CSS.
• Fully Responsive: Adapts seamlessly to different screen sizes.
• Easy Integration: Drop into any React project with ease.

🚀 Live Demo & Tutorial

• Live Preview: Vercel Demo

📸 Preview

🛠️ Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm, yarn, or pnpm

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd gradiolex-tailwind-carousel
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

🧩 How to Add to an Existing Project

To use this carousel component in your own React project, follow these steps:

1. Install Dependencies: Ensure you have Tailwind CSS set up in your project. Then, install react-feather which is used for the navigation icons:

   npm install react-feather
   

2. Copy the Component: Copy the src/Carousel.jsx file from this repository into your project's component directory (e.g., src/components/Carousel.jsx).

3. Import and Use: Import the component and pass your images as children:

   import Carousel from './components/Carousel';
   
   function MyApp() {
     const slides = [
       "https://example.com/image1.jpg",
       "https://example.com/image2.jpg",
       "https://example.com/image3.jpg"
     ];
   
     return (
       <div className="w-full max-w-3xl aspect-[16/9] mx-auto">
         <Carousel autoSlide={true} autoSlideInterval={5000}>
           {slides.map((url, index) => (
             <img key={index} src={url} alt={`Slide ${index + 1}`} className="w-full h-full object-cover" />
           ))}
         </Carousel>
       </div>
     );
   }
   
   export default MyApp;
   

📜 Available Scripts

• npm run dev - Starts the Vite development server.
• npm run build - Builds the app for production.
• npm run lint - Lints the codebase using ESLint.
• npm run preview - Previews the production build locally.

💻 Technologies Used

• React
• Tailwind CSS
• Vite
• React Feather (Icons)