3d-phone-carousel

3D Phone Carousel

A simple, modern look 3D phone carousel, written with React.

• Modern simple look
• Easy to implement
• Easy to modify
• CSS based 3D effect
• Written with React

Installation

Just run npm i 3d-phone-carousel

How to use

After installation, you are able to use PhoneSlider component.

You can set up these props to:

• items (Required): And array of objects, that should include these variables:
  • image: Image url or reference (recommended image size: 408 * 190)
  • title: The title of slide
  • description: The subtitle of the slide
• delay (Optional): The amount of time that component slides automatically (in milliseconds). Default value is 3000 (3 seconds)
• forwardButtonRef (Optional): Define a Custom forward slide move button reference; That should be a React or html component reference (You can use useRef() to define the reference)
• backwardButtonRef (Optional): Define a Custom backward slide move button reference; That should be a React or html component reference (You can use useRef() to define the reference)

Example of usage

// REMEMBER TO IMPORT BOTH COMPONENT AND ITS STYLE
import "3d-phone-carousel/dist/index.css"
import { PhoneSlider } from '3d-phone-carousel/dist';

function YourParentComponent(props) {
    const slideForwardButton = useRef(null);
    const slideBackgroundButton = useRef(null);

    return <div className="section">

      <div ref={slideForwardButton} className="custom-slide-button"/>

      <PhoneSlider style={{
          margin: "80px 0"
      }}
        backwardButtonRef={slideBackgroundButton}
        forwardButtonRef={slideForwardButton}
        items={[
          {
            description: "Example Description of slide 1",
            title: "Title of image 1",
            image: "/url to your image"
          },
          {
            description: "Example Description of slide 2",
            title: "Title of image 2",
            image: "/url to your image"
          },
          {
            description: "Example Description of slide 3",
            title: "Title of image 3",
            image: "/url to your image"
          }
        ]}/>

      <div ref={slideBackgroundButton} className="custom-slide-button"/>

  </div>
}

Need help or any suggestions?

Email me: mahdi.khansari.mk@gmail.com

Telegram: @geekoptech

Author and licence

This project has been made by Mahdi Khansari under MIT licence

Help me to maintain and improve it :)