react-coverfl0w
React Coverfl0w === [ 
MIT License
Ecosystems:
TypeScript
React Coverfl0w
Installation
To install, you can use npm or yarn:
$ npm install --save react-coverfl0w
API documentation
| Name | Type | Default | Description |
|---|---|---|---|
| images | Image[] | Array of Images {src, href, alt} | |
| className | string | Add css class to the coverflow for customization | |
| slidesPerSide | number | Number of images displayed on either side of the center | |
| rotation | number | 45 | Rotation in degrees for inactive images |
| opacityInterval | boolean | [1, 0.8, 0.5, 0.2] | Define how you want images to "fade" out on the side |
| scaleInterval | boolean | [1, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1] | Define how you want images to scale down in size |
Usage
import Coverflow, { Images } from "react-coverfl0w";
const IMAGES: Images[] = [
{
src:
"myimage.png",
href: "https://www.test.com",
alt: "alt"
},
{
src:
"myimage.png",
href: "https://www.test.com",
alt: "alt"
},
];
function App() {
return (
<div className="App">
<div className="content">
<Coverflow images={IMAGES} slidesPerSide={3} />
</div>
</div>
);
}
Demos
Package Rankings
Top 20.17% on Npmjs.org
Badges
Extracted from project README
