Simple React Carousel Library
![MIT License](https://camo.githubusercontent.com/09dd063b45059093f46c4ed8d57f8f9edea0957c3cfc6f1cb9f2206b93c11775/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f72656163742d707572652d6361726f7573656c2e737667)
![Example React Pure Carousel](https://github.com/Blaine93/react-pure-carousel/raw/master/example/src/assets/spaceCarousel.jpg?raw=true)
npm install --save react-pure-carousel
yarn add react-pure-carousel
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>
);
}
}
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 |
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 |
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 |
Key |
Action |
Right/Up Arrow or D/W key |
Next slide |
Left/Down Arrow or A/S key |
Previous slide |
MIT © Blaine93