React Three Image Carousel

A smooth, responsive React carousel component that displays three images at once with a beautiful sliding animation effect.

Features

• 🎯 Three images displayed simultaneously
• 🔄 Smooth sliding animations
• ⚡ Auto-play functionality
• 🎨 Customizable styling
• 📱 Responsive design
• 🖱️ Interactive navigation dots
• 🔍 Image preloading
• 🎛️ Highly customizable props

Installation

npm install react-three-image-carousel

or

yarn add react-three-image-carousel

Dependencies

This package requires the following peer dependencies:

• React >=16.8.0
• React DOM >=16.8.0
• Framer Motion >=10.0.0

Usage

import { Carousel } from "react-three-image-carousel";

function App() {
  const images = [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image3.jpg",
    "https://example.com/image4.jpg",
  ];

  return <Carousel images={images} />;
}

Props

| Prop | Type | Default | Description | | ------------------ | ---------- | --------- | ------------------------------------------------------ | | images | string[] | Required | Array of image URLs to display | | autoPlay | boolean | true | Enable/disable automatic sliding | | autoPlayInterval | number | 3000 | Time between slides (in milliseconds) | | imageWidth | string | "380px" | Width of each image | | imageHeight | string | "450px" | Height of each image | | containerHeight | string | "520px" | Height of the carousel container | | dotColor | string | "#000" | Color of the active navigation dot | | userPauseTime | number | 5000 | Time to pause after user interaction (in milliseconds) |

Examples

Basic Usage

<Carousel images={images} />

Custom Styling

<Carousel
  images={images}
  imageWidth="400px"
  imageHeight="500px"
  containerHeight="600px"
  dotColor="#FF5733"
/>

Disabled Auto-play

<Carousel images={images} autoPlay={false} />

Custom Intervals

<Carousel images={images} autoPlayInterval={5000} userPauseTime={3000} />

Features Explanation

1. Three Image Display: Shows three images simultaneously with the center image being the active one.
2. Auto-play: Automatically transitions between images at specified intervals.
3. User Interaction: Clicking an image makes it the active center image.
4. Pause on Interaction: Auto-play pauses temporarily when users interact with the carousel.
5. Image Preloading: Preloads images for smooth transitions.
6. Responsive Design: Adapts to different screen sizes.
7. Navigation Dots: Interactive dots for direct navigation to specific images.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC

Author

Kotai Soen

Support

For issues and feature requests, please use the GitHub issues page.