flickity-react

Install

npm install --save @trunghtdev/flickity-react
npm install --save flickity

Usage

import React from 'react'

import Slider from 'flickity-react'
import 'flickity/dist/flickity.min.css';

const App = () => {
  return (
    <Slider
  options={{
    prevNextButtons: false,
    pageDots: false,
    draggable: true,
    cellAlign: 'left'
  }}
  >
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
    <div style={{ height: 200, width: 200, marginLeft: 10, backgroundColor: 'red' }}></div>
  </Slider>
  )
}

License

MIT ©