React Carousel Slider

[![npm package][npm-badge]][npm]

A 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.

!alt text

Full Documentation on Github

Demo

##Playground


Installation

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

Mobile Compatible

This component would register touch events automaically where mobile device veiwport is detected, so the drag event is also available on mobile.

Usage

We could render a component with the slideItems 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 ;
}
}
`
Or give an array of your own regular React elements to slideCpnts 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:

![Edit 5y7v8ppn0x](https://codesandbox.io/s/5y7v8ppn0x)


`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}



);

return (

);
}
}
`

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

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.

* manner
* accEle
* 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