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.

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:

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):

// 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:

// 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.

   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.

License

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

Author: Vaibhav Yadav | GitHub: https://github.com/vaibhavydv | X: https://x.com/imvaibhavyadav | Instagram: https://www.instagram.com/_vaibhavyadav