PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

1.0.0

npm

3d-react-carousal

3D carousel in react

3d-carousalcarousalreact
Published6 Apr 2018
Direct dependencies13
Transitive dependenciesNot calculated

README

Current package documentation

React 3D Carousel component

3D carousel component in react (with swipe support).

Demo

Demo

jsfiddle (https://jsfiddle.net/suhailsulu/8hnqaz2c/)

Installation

npm

 npm i 3d-react-carousal

yarn

 yarn add 3d-react-carousal
Add fa-css in public.html for arrows
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Importing the component
import {Carousel} from '3d-react-carousal';
.
.
.
let slides = [
    <img  src="https://picsum.photos/800/300/?random" alt="1" />,
    <img  src="https://picsum.photos/800/301/?random" alt="2" />  ,
    <img  src="https://picsum.photos/800/302/?random" alt="3" />  ,
    <img  src="https://picsum.photos/800/303/?random" alt="4" />  ,
    <img src="https://picsum.photos/800/304/?random" alt="5" />   ];
.
.
.
.
const callback = function(index){
    console.log("callback",index);
}
.
.
<Carousel slides={slides} autoplay={true} interval={1000} onSlideChange={callback}/>

props

slides :- Array of react components
autoplay :- Boolean (true or false) - optional
interval :- number (time in milliseconds) - optional
arrows :- Boolean (true or false) - optional
onSlideChange :- callback function with index of the slide as argument - optional
You can give any component in the slides like images, divs or even your custom components

Downloads & popularity

Awaiting observations

No metric observations yet

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

Declared dependencies 15

Native requirements
13 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
webpack
Environment
{
  "local_name": "webpack",
  "alias": false,
  "peer_metadata": null
}
^2.6.1runtime
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
>=15.0.1development
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
>=15.0.1development
babel-cli
Environment
{
  "local_name": "babel-cli",
  "alias": false,
  "peer_metadata": null
}
^6.24.1development
babel-core
Environment
{
  "local_name": "babel-core",
  "alias": false,
  "peer_metadata": null
}
^6.24.1development
babel-loader
Environment
{
  "local_name": "babel-loader",
  "alias": false,
  "peer_metadata": null
}
^7.0.0development
babel-plugin-transform-object-rest-spread
Environment
{
  "local_name": "babel-plugin-transform-object-rest-spread",
  "alias": false,
  "peer_metadata": null
}
^6.23.0development
babel-plugin-transform-react-jsx
Environment
{
  "local_name": "babel-plugin-transform-react-jsx",
  "alias": false,
  "peer_metadata": null
}
^6.24.1development
babel-preset-env
Environment
{
  "local_name": "babel-preset-env",
  "alias": false,
  "peer_metadata": null
}
^1.5.1development
css-loader
Environment
{
  "local_name": "css-loader",
  "alias": false,
  "peer_metadata": null
}
^0.28.11development
node-sass
Environment
{
  "local_name": "node-sass",
  "alias": false,
  "peer_metadata": null
}
^4.8.3development
sass-loader
Environment
{
  "local_name": "sass-loader",
  "alias": false,
  "peer_metadata": null
}
^6.0.7development
style-loader
Environment
{
  "local_name": "style-loader",
  "alias": false,
  "peer_metadata": null
}
^0.20.3development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^15.5.4peer
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
>=15.0.1peer

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-0YodmthdYU1+k5SOqRgl5Hif5vc9XzjtR0vvepoGpFq7U1teT/4rEYny+g6Nr6wafurvlhBzrQ9dkkpKTM/MRA==",
  "shasum": "e8a8bc31fd417520bf3ab3704dab3e6a9fccb364",
  "tarball": "https://registry.npmjs.org/3d-react-carousal/-/3d-react-carousal-1.0.0.tgz",
  "fileCount": 10,
  "unpackedSize": 91343,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEYCIQCsH8W19dbSsWlr4K9EbiQhmD0yHTSOVVjtD0vquK4VDwIhALPEn8QmtuPUCzgX993e/Aqwe5DVIqAeUNdYeqyXmtPs"
    }
  ]
}

Repository

PENDING
suhailsulu/react-carousel-3d

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:37 UTC

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

Record identity

package_version:f0cae86c58a9caf45d64e71bf4ef1ce6396ad0f0463cc6b25e1e7b1e3a962ce7

Other collected versions

5.0.012 Mar4.0.219 Jul4.0.110 Jul4.0.010 Jul3.1.026 May3.0.02 MayView all collected versions →