Easy-react-carousel NPM

easy-react-carousel

Why?

Bored of installing heavy components full of stuff that you don't need that sometimes are not even made in react ? If you are looking for a light carousel component, fully made in react this is the right solution for you

Installation

Basic

npm i easy-react-carousel

Usage

By default, the component does not need anything except for an array of object (slides) passed by the prop slides.

import React from 'react';
import Carousel from 'easy-react-carousel'

const slides = [
    {
      title: // title ,
      description: // description,
      id: // every slide must have a unique id,
      image: // the image url,
      url: // this is used to redirect to the url page when you click on the slide
    },
    // ...
]

const Carousel = () => (
  <Carousel
    slides={slides}
  />
);

export default Carousel;

Props

Carousel props

Prop	Type	Default	Description
slides	Array	`undefined`	You must pass an array of object with the property you see above
onChange	Function	`undefined`	Handler triggered when current slide change
onClick	Array	`undefined`	Triggered when you click on a slide
showSelectMenu	Boolean	`true`	Shows or not the corousel "buttons" that allows you to switch between slides
showArrows	Boolean	`false`	Shows or not side arrows to navigate in the carousel
disableRedirect	Boolean	`true`	By default if the `url` property it's present, when you click on a slide you are redirected to that url, you can disable that option setting this to `false`
speed	Number	`5000`	This is the speed of the transition between one slide and another
rtl	Boolean	`true`	Determines in which direction the slider "slide", if it's true it go from right to left (that's why rtl) otherwise from left to right
borderRadius	Number	`4px`	This is the border-radius of the carousel
height	Number	`180px`	The height of the carousel
alignment	String	`left`	You can change the alignment of the text and description to `left`, `center`, `right`