react-flexible-carousel

⭐️ Flexible image carousel and respond on any device 💻 🖥 👀

Showing:

Popularity

Downloads/wk

18

GitHub Stars

14

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

3.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

PropertyTypeDescriptionDefaultDone
urls (required)arrayAn array of urlsnullDone
listWidthintcarousel image width size300Done
listHeightintcarousel image height size400Done
auto_playbooleanfalseDone
auto_play_speedintspeed setting for auto play1000Done
use_arrowbooleanfalseDone
use_left_arrowReactElementcustom left arrow ReactElementnullDone
use_right_arrowReactElementcustom right arrow ReactElementnullDone
use_thumbsbooleanDone
touch_modebooleancontrol touch mode by yourselfDone
thumbsPerPageint5Done
lazy_loadbooleantrueDone
styleEasestringuse css3 ease style e.g. "ease-in-out", "ease-in" etc..ease-outDone
custom_stylesobjectcustom styles for carousel component. e.g. "wrapper", "list", "thumbs", "thumbs_item"Done
custom_thumbs({ setting, handler })ReactElementsee exampleDone
custom_lists({ urls, width, height })ReactElementsee exampleDone
start_actionIDint0Done

Events

PropertyTypeDescriptionDone
beforeWrapperMouseOver(actionID, actionUrl)functionThis callback fires before wrapper mouse overDone
afterWrapperMouseOver(actionID, actionUrl)functionThis callback fires after wrapper mouse overDone
beforeWrapperMouseLeave(actionID, actionUrl)functionThis callback fires before wrapper mouse leaveDone
afterWrapperMouseLeave(actionID, actionUrl)functionThis callback fires after wrapper mouse leaveDone
beforeActionIDChange(preID)functionThis callback fires before actionID changedDone
afterActionIDChange(nextID)functionThis callback fires after actionID changedDone

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100