Skip to content

koska-devs/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

No packages published

Languages

  • JavaScript 55.1%
  • CSS 44.9%