React-pure-carousel NPM

react-pure-carousel

Simple React Carousel Library

Example React Pure Carousel

Install

npm install --save react-pure-carousel

yarn add react-pure-carousel

Usage

import React, { Component } from 'react';

import { Carousel } from 'react-pure-carousel';

class Example extends Component {
  render () {
    return (
      <Carousel>
        <Carousel.Background />
        <Carousel.Item>
          <p>Text 1</p>
          <h5>Title 1</h5>
        </Carousel.Item>
        <Carousel.Item>
          <p>Text 2</p>
          <h5>Title 2</h5>
        </Carousel.Item>
        <Carousel.Item>
          <p>Text 3</p>
          <h5>Title 3</h5>
        </Carousel.Item>
      </Carousel>
    );
  }
}

Props

Carousel

Main Carousel component

Name	Type	Default	Description
theme	string	'light'	Theme for carousel. Can get the following values: `dark`, `light`
duration	number	1	Transition duration for slides. `1` means 1 second
interval	number	null	Sets the interval between automatic slides scrolling. If value is `1000` it indicates 1 second. If value is `null` then auto scrolling disabled
looped	bool	true	Whether slides looped inside carousel or not. Available options: `true`, `false`
prevArrow	string \|\| HTML element	null	Custom arrow element that leading to the previous slide
nextArrow	string \|\| HTML element	null	Custom arrow element that leading to the next slide
hidePagination	bool	false	Whether show or hide pagination at the bottom
afterSlide	func		Hook to be called after a slide is changed
beforeSlide	func		Hook to be called before a slide is changed
vertical	bool	false	Vertical mode for Carousel
alignPaginationOpposite	bool	false	Whether display pagination on the opposite side of Carousel or not
enableKeyboardControls	bool	true	When set to true will enable keyboard controls when the carousel has focus. If the carousel does not have focus, keyboard controls will be ignored

Carousel.Background

Layer for carousel static background

Name	Type	Default	Description
src	string		Image path for using as background image
color	string	transparent	Background color for carousel

Carousel.Item

Carousel Slide

Name	Type	Default	Description
backgroundColor	string		Background color for certain carousel item
backgroundImage	string		Background image for certain carousel item
alignItems	string	'center'	Alignment of the items inside Item. Can get the following values: `center`, `top`, `bottom`