React Carousel

**React Carousel ** is a react and styled component slider. It is fully configurable.

Live Image

Features

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-carousel

Running example in local

$ git clone github.com/mathan1995/react-carousel.git
$ 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-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 reponsive={responsive}>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
  </Slider>
);

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

Configurable Props

Props Type Default Value Description
showArrows Boolean true If true then only Arrows of navigation will be shown
showDots Boolean true Show navigation or pagination dots below the slider
infinite 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 component to change the view of dots wrapper like position, background, etc. 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 carousel
cardsToShow 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 completed
beforeSlide Function null This function will be executed before starting every sliding
responsive Array null Use this for responsiveness Documentation
autoSlide 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 slider
padding String 0px 20px Any valid css padding value for giving padding around the slider

License

MIT (Free Software, Cheers From £#Mathan!)

                buymeacoffee.com/mathan95