iris-slider-npm/README.md

A responsive and interactive 3D image slider package for React applications by iRIS Team | Vaibhav Yadav.

# `iris-slider-npm`

A responsive and interactive 3D image slider component for React applications, built with pure CSS transformations and Tailwind CSS for styling Developed by Vaibhav Yadav.

<img src="https://i.ibb.co/vvMSXF8R/image.png" alt="image" height="300" border="0">


## Features

  * **3D Perspective Effect:** Engaging visual transitions between slides.
  * **Responsive Design:** Adapts to various screen sizes (mobile, tablet, desktop).
  * **Pure CSS Transitions:** Smooth animations without complex JavaScript.
  * **Configurable Slides:** Easily pass image URLs, background colors, content, and alt text via props.
  * **Accessibility:** Includes `aria-label` for screen readers.
  * **Lightweight:** Minimal dependencies.

## Installation

To use this component in your React project, install it via npm:

```bash
npm install iris-slider-npm
```

**Note:** This component uses Tailwind CSS for its base styling. Ensure Tailwind CSS is configured in your project. You will also need to import the component's specific CSS file in your main application entry point (e.g., `src/index.js` or `src/App.js`):

```javascript
// In your main application file (e.g., src/index.js or src/App.js)
import 'iris-slider-npm/dist/index.css';
// ... rest of your application code
```

## Usage

### Props

The `ImageSlider` component accepts the following prop:

  * `slides`: An `Array` of objects, where each object represents a slide.
    Each slide object can have the following properties:
      * `id` (Required): A unique number or string identifier for the slide.
      * `background` (Optional): A CSS color string (e.g., `"#00BCD4"`, `"red"`, `"rgb(0,0,0)"`) to be used as the slide's background.
      * `image` (Optional): A URL string to an image. If both `background` and `image` are provided, `image` will take precedence as a `background-image`.
      * `content` (Optional): A string or JSX element to be displayed on the slide.
      * `alt` (Optional): A string providing alternative text for the slide, important for accessibility (screen readers). If not provided, `content` or a default "Slide X" text will be used for `aria-label`.

### Example

Here's how you can use the `ImageSlider` component in your React application:

```javascript
// src/App.js (or any other component file)
import React from 'react';
import ImageSlider from 'iris-slider-npm'; // Adjust path if not installed via npm
import 'iris-slider-npm/dist/index.css'; // IMPORTANT: Import the component's CSS

function App() {
  const slidesData = [
    {
      id: 1,
      background: '#00BCD4',
      content: 'Explore New Horizons',
      alt: 'Abstract blue background with text "Explore New Horizons"',
    },
    {
      id: 2,
      image: 'https://placehold.co/600x400/4CAF50/white?text=Nature+Scene',
      content: 'Discover Serene Landscapes',
      alt: 'Green forest and mountains under a clear sky',
    },
    {
      id: 3,
      background: '#CDDC39',
      content: 'Innovate with Us',
      alt: 'Bright yellow-green background with text "Innovate with Us"',
    },
    {
      id: 4,
      image: 'https://placehold.co/600x400/FFC107/white?text=Cityscape',
      content: 'Experience Urban Vibrancy',
      alt: 'A bustling city skyline at sunset with illuminated buildings',
    },
    {
      id: 5,
      background: '#FF5722',
      content: 'Inspire Creativity',
      alt: 'Warm orange background with text "Inspire Creativity"',
    },
  ];

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
      <h1 className="text-4xl font-extrabold text-center my-12 text-gray-800 tracking-tight">
        Our Featured Gallery
      </h1>
      <ImageSlider slides={slidesData} />
      <div className="mt-16 text-center text-gray-600">
        <p>Click on any slide to bring it to the front.</p>
        <p className="text-sm mt-2">Built with React and pure CSS for a smooth experience.</p>
      </div>
    </div>
  );
}

export default App;
```

## Contributing

We welcome contributions to the `iris-slider-npm` project\! If you have suggestions for improvements, new features, or bug fixes, please feel free to:

1.  **Fork the repository** on GitHub.
2.  **Create a new branch** for your feature or fix.
    ```bash
    git checkout -b feature/your-feature-name
    ```
3.  **Make your changes** and ensure the code adheres to the existing style.
4.  **Test your changes** thoroughly.
5.  **Commit your changes** with a clear and concise message.
6.  **Push your branch** to your forked repository.
7.  **Open a Pull Request** to the `main` branch of the original repository.

Please ensure your pull requests are well-documented and include any relevant tests.

## Donate Now

🚀 Support Open Source Innovation
This project is completely open source and free to use.
If you find it helpful, consider making a small donation — it helps sustain development and create more free tools for the community.
<p align="center">
  <a href="upi://pay?pa=imvaibhavyadav@oksbi&pn=Vaibhav_Yadav&am=100.00&cu=INR&tn=Payment_For_Donate_iris_npm">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6fs2Or_dZ9Bxpr2ztVUNb8TGMdgRBH0hLMininTEH5_JLzI2DKrkwb7uMeWX5unJt7To&usqp=CAU" alt="UPI QR" width="200" />
  </a>
</p>




## License

This project is licensed under the ISC License. See the `LICENSE` file for details.

-----

**Author:** Vaibhav Yadav |
**GitHub:** [https://github.com/vaibhavydv](https://github.com/vaibhavydv) |
**X:** [https://x.com/imvaibhavyadav](https://x.com/imvaibhavyadav) | 
**Instagram:** [https://www.instagram.com/_vaibhavyadav](https://www.instagram.com/_vaibhavyadav)