React styled-components carousel. No css is needed, fully configurable, SSR supported. Theming supported.
npm install react-styled-carousel

#### Features
- Mostly configurable
- Styled-Components
- No external CSS required.
- Server Side Rendering supported
> Note: Server Side Rendering works well without the styled-components collectStyles function also. But for better user experience please use collectStyles function from styled-components
#### Installation
``sh`
$ npm install --save react-styled-carousel
#### Running example in local
`sh`
$ git clone github.com/itsMrAkhil/react-styled-carousel
$ npm start
It'll open localhost:9000 port, where you can see live demo.
#### Example
`js
import React from 'react';
import ReactDOM from 'react-dom'
import Slider from 'react-styled-carousel';
const ExampleSlider = () => (
1
2
3
4
);
ReactDOM.render(
`
#### Responsive
react-styled-carousel is responsive. Below is the example configuration of responsiveness.
> Note: If responsive prop is provided then, it'll override the cardsToShow prop. In other words cardsToShow will not work.
`js
import React from 'react';
import ReactDOM from 'react-dom'
import Slider from 'react-styled-carousel';
const responsive = [
{ breakPoint: 1280, cardsToShow: 4 }, // this will be applied if screen size is greater than 1280px. cardsToShow will become 4.
{ breakPoint: 760, cardsToShow: 2 },
];
const ExampleSlider = () => (
1
2
3
4
);
ReactDOM.render(
`
#### Configurable Props
Props | Type | Default Value | Description
----- | ---- | ------------- | -----------
showArrows | Boolean | true | If true then only Arrows of navigation will be shownshowDots | Boolean | true | Show navigation or pagination dots below the sliderinfinite | Boolean | true | Infinitely slide cards.Dot | React Node | Default | Customized pagination button (Active slide Dot will get active as Boolean prop.)DotsWrapper | Styled Element | Default | Customized wrapper for your Note: It should be a styled ul, otherwise you may not see any Dot Components.LeftArrow | React Node | Default | Customized left arrow button. It'll get disabled Boolean prop if first Dot is active and infinite is false.RightArrow | React Node | Default | Customized right arrow button. It'll get disabled Boolean prop if last Dot is active and infinite is false.children | React Node | null | Cards are components which you want to show in the carouselcardsToShow | Number | Children length | How many cards to be shown for a single slide.afterSlide | Function | null | This function will be executed after every sliding is completedbeforeSlide | Function | null | This function will be executed before starting every slidingresponsive | Array | null | Use this for responsiveness DocumentationautoSlide | Number or Boolean | 2000 | Used to make carousel auto slide for every given time interval. Or for 2000ms if the prop value is true.pauseOnMouseOver| Boolean | true | Pause auto sliding on mouse over the carousel.hideArrowsOnNoSlides | Boolean | true | Hide arrows if there is only one slide to show.margin| String | 0px | Any valid css margin value for giving margin around the sliderpadding | String | 0px 20px` | Any valid css padding value for giving padding around the slider
License
----
MIT (Free Software, Chill Yeah!)