react-carousel-slider React component
npm install react-carousel-sliderA React component that endeavors to provide flexbility for customizing carousel/slider.
##Features :
* Custom slide is available, arrange style and element even such as , .
* Work well with varaible slide height and width.
* Infinite circular sliding.
* Auto sliding.
* Touch events for dragging is available on mobile device.
* Navigation buttons customizing, multiple options to locate them.
* Dots customizing, multiple options to locate them.
##Playground

Install it from npm.
``js`
npm install react-carousel-slider`
As ES module:js`
import CarouselSlider from "react-carousel-slider"`
As CommonJS module:js`
var CarouselSlider = require("react-carousel-slider")
The UMD build:
`html `Demo & Examples
carr1005.github.io/react-carousel-slider/index.html
This component would register touch events automaically where mobile device veiwport is detected, so the drag event is also available on mobile.
We could render a prop which accepts an array of objects with the specific simple sturcture and keys in default style.
`jsx
import React, {Component} from 'react'
import CarouselSlider from 'react-carousel-slider';
class App extends Component {
render() {
let data = [
{
des: "1",
imgSrc: "https://i.imqur.com/yourImage.jpg"
},
{
des: "2",
imgSrc: "https://i.imqur.com/yourImage2.jpg"
}
];
return
}
}
`slideCpnts
Or give an array of your own regular React elements to prop, this lets our slide have availability to contain a clickable link. Even cooperating with component of React Router library for client side routing is possible.
* Try by yourself! Observe the address bar:

`jsx
import React, {Component} from 'react'
import CarouselSlider from 'react-carousel-slider';
import {BrowserRouter as Router, Link } from 'react-router-dom';
class App extends Component {
render() {
let jsonData = require('./slidesExample.json');
/*
{
"items": [
{
"des": "1",
"imgSrc": "https://i.imqur.com/yourImage.jpg"
},
{
"des": "2",
"imgSrc": "https://i.imqur.com/yourImage2.jpg"
}
]
}
*/
let items = jsonData.items.map((item, index) =>
{item.des}
Allowable Props
slideItems
* slideCpnts*
slideItems - accepts an array of objects, specific structure and keys are required.
`js
[
{
des: "1",
imgSrc: "https://i.imqur.com/yourImage.jpg"
},
{
des: "2",
imgSrc: "https://i.imqur.com/yourImage2.jpg"
}
]
`
* slideCpnts - accepts an array of regular React elements, the element and available image source are required, we have the default style for {item.des} block, override it by specifying your own with using inline-styles.`
jsx`
let textBoxStyle = {
width: "50%",
background: "transparent",
textAlign: "right",
color: "black"
};
let items = jsonData.items.map((item, index) =>
);
All props below are optional, default setting is applied if we don't specify ours.
* manneraccEle
* dotsSetting
* buttonSetting
* lBtnCpnt
* rBtnCpnt
* sliderBoxStyle
* itemsStyle
* textBoxStyle`
*
*
Full Documentation on Github
[npm-badge]: https://img.shields.io/npm/v/react-carousel-slider.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-carousel-slider