3d-phone-carousel
v1.0.52
Published
A simple, modern look 3D image carousel with IPhone frame, written with React
Downloads
46
Maintainers
Readme
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 slidedescription
: 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: [email protected]
Telegram: @geekoptech
Author and licence
This project has been made by Mahdi Khansari under MIT licence
Help me to maintain and improve it :)