React Styled Slider

React Styled Slider is a react and styled component slider. It is fully configurable.

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

$ npm install --save react-styled-carousel

Running example in local

$ git clone github.com/itsMrAkhil/react-styled-carousel
$ npm start

It'll open localhost:9000 port, where you can see live demo.

Example

import React from 'react';
import ReactDOM from 'react-dom'
import Slider from 'react-styled-carousel';

const ExampleSlider = () => (
  <Slider>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
  </Slider>
);

ReactDOM.render(<ExampleSlider />, document.getElementById('root'));

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.

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 = () => (
  <Slider>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
  </Slider>
);

ReactDOM.render(<ExampleSlider />, document.getElementById('root'));

Configurable Props

License

MIT (Free Software, Chill Yeah!)