voidit / easy-react-carousel

A simple automatic carousel made in reactjs

easy-react-carousel

An easy, simple and light 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

Support 💻

Any Issue, contribution or idea are welcome 😃