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

• handle wrapper
  • custom wrapper style
• handle list slider
  • handle list auto play
  • handle custom image
    • use image url data
    • use custom component
• handle thumbs
  • custom thumbs position
    • top
    • bottom
    • left
    • right
  • thumbs item custom style
  • thumbs per page
  • start action ID
• handle arrow
  • handle arrow use
  • handle custom arrow component
• handle lazy load
• handle respond design
  • with parent element
• handle touch mode
• handle hook event
  • handle before, after bind event
    • handle wrapper mouse over, leave event
    • handle arrow mouse click
    • handle actionID change
    • handle thumbs item click
    • handle thumbs item change
• handle fancy box show ( click list image and show the bigger one )

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