react-div-carousel

Install

// npm
npm install --save react-div-carousel

// yarn
yarn add react-div-carousel

Usage

example 1

import { Carousel } from 'react-div-carousel'
import 'react-div-carousel/dist/index.css'

const App = () => {
  return (
    <>
      <Carousel uniqueId="id_1" >
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </Carousel>
    </>
  )
}

example 2 : with more props

import { Carousel } from 'react-div-carousel'
import 'react-div-carousel/dist/index.css'

const App = () => {
  return (
    <>
      <Carousel uniqueId="id_1" delay={2000} item={2} vertical={true}
       navigator={{
        position: "top",
        align: "center",
        right: 0,
        padding: "10px 20px",
        fontSize: 12
      }}
      >
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </Carousel>
    </>
  )
}

example 3 : responsive

import { Carousel } from 'react-div-carousel'
import 'react-div-carousel/dist/index.css'

const App = () => {
  return (
    <>
      <Carousel uniqueId="id_1" delay={2000} item={4} vertical={true}
       navigator={{
        position: "top",
        align: "center",
        right: 0,
        padding: "10px 20px",
        fontSize: 12
      }}
      
      responsive={ [
        {
            breakPoint: 420, 
            item: 1, 
            indicators: false,
            nav: false
        },
        {
            breakPoint: 600, 
            item: 2, 
        },
        {
            breakPoint: 1000, 
            item: 3, 
        }
    ]
}
      >
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </Carousel>
    </>
  )
}

If You want to see more detail source,

• example/App.js

Props

| Name | Type | Required | Description | Default | | :-----------------: | :--------: | :--------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- | | uniqueId | String | Required | This is carousel unique id | | | item | Number | Optional | How much iteml display in browser | 2 | | speed | Number | Optional | carosel transition speed. (1 mean 1 second) | 0.2 | | delay | Number | Optional | wait time for next scroll | 2000 | | indicators | Boolean | Optional | This is carousel indicatore | true | | autoplay | Boolean | Optional | Carousel auto play | true | | vertical | Boolean | Optional | Verticle carousel | false | | index | Number | Optional | Carousel starting point set by index | 0 | | navigator | Object | Optional | | false | | responsive | Array | Optional | | responsive by media query |

navigator object details bellow :

1. position : 'string'
   • top
   • bottom
2. align : 'string'
   • start
   • center
   • end
3. left : 'number'
4. right : 'number'
5. top : 'number'
6. bottom : 'number'
7. bg (background color) : 'string'
   • color code , example: #000000 | #ffffff | blue
8. color (font color) : 'string'
   • color code , example: #000000 | #ffffff | blue
9. fontSize: 'number'

responsive object details bellow :

1. breakPoint : 'number for media query'
2. item : 'number'
3. indicators : 'boolean'
4. nav : 'boolean'

License

MIT © shafayatC