React-div-carousel NPM

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'