Skip to content

fabiiomariiano/react-carousel-3d

 
 

Repository files navigation

React 3D Carousel component

3D carousel component in react.

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';
or 
var Carousel = require( '3d-react-carousal').Carousel;
.
.
.
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" />   ];
.
.
.
<Carousel slides={slides}/>

props

slides :- Array of react components you can give any component in the slides like images, divs or even your custom components

About

3D carousal component in react

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 55.1%
  • CSS 44.9%