React Flexible Carousel
⭐️ Flexible image carousel and respond on any device 💻 🖥 👀
Simple Example
import React, { Component } from 'react'
import { Carousel } from 'react-flexible-carousel'
class SimpleExample extends Component {
render() {
const urls = [
'http://images.freeimages.com/images/previews/a6c/window-7-1547198.jpg',
'http://images.freeimages.com/images/previews/5f7/hunter-s-bend-1316926.jpg',
'http://images.freeimages.com/images/previews/423/burger-1320282.jpg',
'http://images.freeimages.com/images/previews/f44/strawberry-cake-2-1323179.jpg',
'http://images.freeimages.com/images/previews/5b0/rubik-s-cube-1-1424892.jpg',
]
return (
<Carousel
urls={ urls }
use_thumbs={ true }
listHeight={ 200 }
/>
)
}
}
export default SimpleExample
Example page
Demo Page
Installation
> npm install react-flexible-carousel --save
USE
examples
PROGRESS
Props
Property |
Type |
Description |
Default |
Done |
urls (required) |
array |
An array of urls |
null |
Done |
listWidth |
int |
carousel image width size |
300 |
Done |
listHeight |
int |
carousel image height size |
400 |
Done |
auto_play |
boolean |
|
false |
Done |
auto_play_speed |
int |
speed setting for auto play |
1000 |
Done |
use_arrow |
boolean |
|
false |
Done |
use_left_arrow |
ReactElement |
custom left arrow ReactElement |
null |
Done |
use_right_arrow |
ReactElement |
custom right arrow ReactElement |
null |
Done |
use_thumbs |
boolean |
|
|
Done |
touch_mode |
boolean |
|
control touch mode by yourself |
Done |
thumbsPerPage |
int |
|
5 |
Done |
lazy_load |
boolean |
|
true |
Done |
styleEase |
string |
use css3 ease style e.g. "ease-in-out", "ease-in" etc.. |
ease-out |
Done |
custom_styles |
object |
custom styles for carousel component. e.g. "wrapper", "list", "thumbs", "thumbs_item" |
|
Done |
custom_thumbs({ setting, handler }) |
ReactElement |
see example |
|
Done |
custom_lists({ urls, width, height }) |
ReactElement |
see example |
|
Done |
start_actionID |
int |
|
0 |
Done |
Events
Property |
Type |
Description |
Done |
beforeWrapperMouseOver(actionID, actionUrl) |
function |
This callback fires before wrapper mouse over |
Done |
afterWrapperMouseOver(actionID, actionUrl) |
function |
This callback fires after wrapper mouse over |
Done |
beforeWrapperMouseLeave(actionID, actionUrl) |
function |
This callback fires before wrapper mouse leave |
Done |
afterWrapperMouseLeave(actionID, actionUrl) |
function |
This callback fires after wrapper mouse leave |
Done |
beforeActionIDChange(preID) |
function |
This callback fires before actionID changed |
Done |
afterActionIDChange(nextID) |
function |
This callback fires after actionID changed |
Done |