PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

1.0.51

npm

3d-phone-carousel

A simple, modern look 3D image carousel with IPhone frame, written with React

3dcarouselphonereactsliderslideshow
Published25 Feb 2024
Direct dependencies30
Transitive dependenciesNot calculated

README

Current package documentation

3D Phone Carousel

A simple, modern look 3D phone carousel, written with React. An animated GIF show of 3D phone carousel

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

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 31

Native requirements
30 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
@testing-library/jest-dom
Environment
{
  "local_name": "@testing-library/jest-dom",
  "alias": false,
  "peer_metadata": null
}
^4.2.4development
@testing-library/react
Environment
{
  "local_name": "@testing-library/react",
  "alias": false,
  "peer_metadata": null
}
^9.5.0development
@testing-library/user-event
Environment
{
  "local_name": "@testing-library/user-event",
  "alias": false,
  "peer_metadata": null
}
^7.2.1development
@types/jest
Environment
{
  "local_name": "@types/jest",
  "alias": false,
  "peer_metadata": null
}
^25.1.4development
@types/node
Environment
{
  "local_name": "@types/node",
  "alias": false,
  "peer_metadata": null
}
^12.12.38development
@types/react
Environment
{
  "local_name": "@types/react",
  "alias": false,
  "peer_metadata": null
}
^16.9.27development
@types/react-dom
Environment
{
  "local_name": "@types/react-dom",
  "alias": false,
  "peer_metadata": null
}
^16.9.7development
@typescript-eslint/eslint-plugin
Environment
{
  "local_name": "@typescript-eslint/eslint-plugin",
  "alias": false,
  "peer_metadata": null
}
^2.26.0development
@typescript-eslint/parser
Environment
{
  "local_name": "@typescript-eslint/parser",
  "alias": false,
  "peer_metadata": null
}
^2.26.0development
babel-eslint
Environment
{
  "local_name": "babel-eslint",
  "alias": false,
  "peer_metadata": null
}
^10.0.3development
cross-env
Environment
{
  "local_name": "cross-env",
  "alias": false,
  "peer_metadata": null
}
^7.0.2development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^6.8.0development
eslint-config-prettier
Environment
{
  "local_name": "eslint-config-prettier",
  "alias": false,
  "peer_metadata": null
}
^6.7.0development
eslint-config-standard
Environment
{
  "local_name": "eslint-config-standard",
  "alias": false,
  "peer_metadata": null
}
^14.1.0development
eslint-config-standard-react
Environment
{
  "local_name": "eslint-config-standard-react",
  "alias": false,
  "peer_metadata": null
}
^9.2.0development
eslint-plugin-import
Environment
{
  "local_name": "eslint-plugin-import",
  "alias": false,
  "peer_metadata": null
}
^2.18.2development
eslint-plugin-node
Environment
{
  "local_name": "eslint-plugin-node",
  "alias": false,
  "peer_metadata": null
}
^11.0.0development
eslint-plugin-prettier
Environment
{
  "local_name": "eslint-plugin-prettier",
  "alias": false,
  "peer_metadata": null
}
^3.1.1development
eslint-plugin-promise
Environment
{
  "local_name": "eslint-plugin-promise",
  "alias": false,
  "peer_metadata": null
}
^4.2.1development
eslint-plugin-react
Environment
{
  "local_name": "eslint-plugin-react",
  "alias": false,
  "peer_metadata": null
}
^7.17.0development
eslint-plugin-standard
Environment
{
  "local_name": "eslint-plugin-standard",
  "alias": false,
  "peer_metadata": null
}
^4.0.1development
gh-pages
Environment
{
  "local_name": "gh-pages",
  "alias": false,
  "peer_metadata": null
}
^2.2.0development
microbundle-crl
Environment
{
  "local_name": "microbundle-crl",
  "alias": false,
  "peer_metadata": null
}
^0.13.10development
npm-run-all
Environment
{
  "local_name": "npm-run-all",
  "alias": false,
  "peer_metadata": null
}
^4.1.5development
prettier
Environment
{
  "local_name": "prettier",
  "alias": false,
  "peer_metadata": null
}
^2.0.4development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^18.2.0development
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
^18.2.0development
react-scripts
Environment
{
  "local_name": "react-scripts",
  "alias": false,
  "peer_metadata": null
}
^3.4.1development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^3.7.5development
sass
Environment
{
  "local_name": "sass",
  "alias": false,
  "peer_metadata": null
}
^1.70.0development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^18.2.0peer

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-a4BBYpRtBSNhTrpa0qVXUP8rbYDL9XToPM6zVI2dvyYKcEwn0QfBGxcL+ptu/uzZHkVAeUoZDhNtSaLytnr+KA==",
  "shasum": "37102bd7dad683099a3a783eccdc71180557502d",
  "tarball": "https://registry.npmjs.org/3d-phone-carousel/-/3d-phone-carousel-1.0.51.tgz",
  "fileCount": 12,
  "unpackedSize": 315978,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEYCIQCpk08A8BtUQKtje0Jz66FuF26FAJ8ewneAH3AZnVjcCgIhANzg9FLoYFCmO3YZ0R7Wv3dfCMtKY/V5fecfXEPy8+wX"
    }
  ]
}

Repository

PENDING
mahdi-g01/3d-phone-carousel

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:36 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:fc632c486ebebe828699aa3a4e45d81839e884efb547e77282298ec20730befa

Other collected versions

1.0.5225 Feb1.0.525 Feb1.0.412 Feb1.0.420 Jan1.0.3519 Jan1.0.3419 JanView all collected versions →