@crave/farmblocks-carousel

Farmblocks Carousel

Images carousel that changes the active item automatically from times to times. See storybook

Installation

npm install @crave/farmblocks-carousel

Usage

import React, { Component } from "react";
import { render } from "react-dom";
import Carousel from "@crave/farmblocks-carousel";

const imageSet = [
  {
    image: "https://picsum.photos/640/?image=1080",
    name: "Organic Pepper"
  },
  {
    image: "https://picsum.photos/640/?image=824",
    name: "Tomato"
  },
  {
    image: "https://picsum.photos/640/?image=889",
    name: "Grapefruit"
  }
];

const App = () => <Carousel imageSet={imageSet} />;

render(<App />, document.getElementById("root"));

API

Property	Description	Type	Default
imageSet	The image set to be displayed	arrayOf({ image: string, name: string})
onChange	Function to be called when the current image changes. It passes the image index as parameter	function	() => null
onEnd	Function to be called when the last image has been displayed as active	function	() => null
itemConfig	Configs to be applied on the image cards	object({ width: number, height: number, margin: number, fontSize: string, displayTime: number, transitionTime: number, border: { width: string, radius: string, color: string}	{ width: 656, height: 328, margin: 20, fontSize: "88px", displayTime: 4, transitionTime: 2, border: { radius: "16px", width: "4px", color: "rgba(255, 255, 255, 0.56)" }}

License

MIT