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

• Basic Demo