The React Responsive 3D Carousel is a versatile component designed for React applications. It offers a responsive user interface that adapts seamlessly to different screen widths. Notably, it also includes support for recognizing swipe gestures on mobile devices.

Getting started with this package is straightforward. Explore the documentation for installation and usage instructions.

Demo Page & Links

• Demo Page
• Github
• npm

Key Features

• Source map-excluded JavaScript file size is 12KB.
• Experience a responsive design that adapts to various screen sizes.
• Enable swipe gesture recognition to enhance mobile usability.
• Supports TypeScript and CommonJS.

Installation

Install the package with the following command. React18 should be pre-installed.

npm install react-responsive-3d-carousel

Usage

You can pass down any <tag/> you want

import React from 'react'
import { Carousel } from 'react-responsive-3d-carousel'

export default App() {
  return (
    <Carousel>
      <img src="https://example-image-url-1" alt="example-image-1" />
      <img src="https://example-image-url-2" alt="example-image-2" />
      <video src="https://example-video-url" muted autoPlay loop />
      <iframe src="https://www.youtube.com/embed/example" title="YouTube video player" frameborder="0"/>
      <div>
        <p>Hello</p>
      </div>
    </Carousel>
  )
}

If the tag you want to display on the screen does not go down directly, you must add the following styling.

import React from 'react'
import { Carousel } from 'react-responsive-3d-carousel'

export default App() {
  return (
    <Carousel>
      <a href="https://unsplash.com/">
        <img
          src="https://source.unsplash.com/random/?dog"
          alt="sample-image"
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
          }}
        />
      </a>
    </Carousel>
  )
}

Props

| Name | Type | Default | Description | | ----------------------- | -------------------------- | ------------------------ | ------------------------------------------------------ | | width | string | '500px' | Width of each carousel item (Accepts all CSS units) | | height | string | '300px' | Height of each carousel item (Accepts all CSS units) | | spread | 'wide', 'normal', 'narrow' | 'wide' | Adjusts the horizontal spacing between carousel items. | | depth | number | 1 | 3D depth of the carousel | | autoPlay | boolean | true | Automatically play slide animation | | interval | number | 3000 | Slide transition time interval (ms) | | transitionTime | number | 500 | Slide transition animation time (ms) | | infiniteLoop | boolean | true | Enable slide animation infinitely | | startIndex | number | 0 | Index of the first carousel item to be centered | | pauseOnHover | boolean | true | Stop slide animation when user hovers over carousel | | selectable | boolean | true | Clicking a carousel item positions it to the center | | onClickCenteredItem | (index: number) => void | undefined | Event fired when centered item is clicked | | isShadow | boolean | true | Display shadows of carousel items | | showStatus | boolean | true | Display top right status text (e.g., 2/5) | | statusSize | 'small', 'medium', 'large' | 'small' | Size of the status text | | statusColor | string | 'rgb(255, 255, 255)' | Color of the status text | | isStatusShadow | boolean | true | Display shadows for the status text | | showArrows | boolean | true | Display arrow buttons at both ends | | arrowsWidth | string | '48px' | Width of each arrow (Accepts all CSS units) | | arrowsHeight | string | '83px' | Height of each arrow (Accepts all CSS units) | | arrowsDefaultColor | string | 'rgb(255, 255, 255)' | Color of arrows when not hovered | | arrowsHoveredColor | string | 'rgba(34, 34, 34, 0.53)' | Color of arrows when hovered | | arrowsStrokeWidth | number | 5 | The stroke width of arrows path | | isArrowsShadow | boolean | true | Display shadows for arrows | | showIndicators | boolean | true | Display bottom indicators | | indicatorsSize | 'small', 'medium', 'large' | 'small' | Size of the indicators | | indicatorsActiveColor | string | 'rgb(255, 255, 255)' | Color of an activated indicator | | indicatorsInactiveColor | string | 'rgba(67, 67, 67, 0.4)' | Color of inactivated indicators | | isIndicatorsShadow | boolean | true | Display shadows for the indicators |

Customizing

If necessary, you can override the CSS with !important. The class name can be found in the browser's developer tools or source code.

.react-responsive-3d-carousel__indicators li {
  width: 36px !important;
  height: 36px !important;
}

Contributing

Since this is my first npm package. Welcome to conributing.
Here's contributing guide that contains details on how to set up a development environment.

Issues

If you encounter an issue, please don't hesitate to let me know. Provide a detailed explanation along with any relevant images, and I'll do my best to make improvements. Github Issues