react-flexible-carousel v1.2.6

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

Events