my-react-carousel

This is a simple but powerful carousel built in React with no dependencies. It supports infinite scrolling, touch and mouse swiping, multiple amounts of slides and much more. It also provides an API that allows you to easily add dots (indicators to quickly switch between slides), next and previous buttons etc. while still allowing you to control the markup and styling.

Installing

Use yarn to add it as a dependency in your React app:

``bash
$ yarn add my-react-carousel
`

Usage

In the simplest form, just drop the component into your app and put your slides inside it:

`javascript
import Carousel from "my-react-carousel";

const App = () => (








);
`

This will render an infinitly scrolling carousel that fills the available width and shows three slides at once.

$3

Next/previous buttons is a common way to control a carousel. There's two ways to do this, either use the powerful render API (which we will talk about later), or use refs to access the controls on the Carousel instance:

`javascript
import React from "react";
import Carousel from "my-react-carousel";

const App = () => {
const carousel = React.useRef(null);

return (
<>








carousel.current.previous()}>previous
carousel.current.next()}>next

);
};
`

Note that when using ref we have no way of knowing wether there is a next slide or not, so this is only recommended in the infinite mode (which is enabled by default).

Also available on the ref is the goToStep method which is useful if you want to control the carousel from something else.

$3

In order to know if there is a slide before or after the current one, we need to get some more data. This is where the powerful render API comes handy.

`javascript
import Carousel from "my-react-carousel";

const App = () => (
infinite={false} // For infinite carousels hasPrevious/hasNext will always be true
render={({ slides, hasPrevious, previous, hasNext, next }) => (
<>
{slides}
{hasPrevious && previous}
{hasNext && next}

)}
>







);
`

We still put all our slides as children to the carousel, however, we can now also get access to a lot more data for customizing the UI. This code will only render the previous button if there is a previous slide we can move to.

$3

A very common design is also to use dots to indicate how many slides there are and to quickly move to a specific slide. We have decided to provide a helper for rendering dots, even though you can implement this on your own using the render API.

`javascript
import Carousel, { generateDots } from "my-react-carousel";

const Dot = ({ isActive, onClick }) => (
style={{
padding: "16px",
borderRadius: "50%",
border: "1px solid #000",
backgroundColor: isActive ? "#000" : "transparent"
}}
onClick={onClick}
/>
);

const App = () => (
render={generateDots(({ slides, dots }) => (
<>
{slides}
{dots.map(({ index, isActive, onClick }) => (

))}

))}
>







);
`

The generateDots helper will add dots to the props in the render function, that is passed inside generateDots.

API

$3

All slides you want to render in the carousel. The carousel will apply some styling to the elements, so make sure that the outermost element is a DOM node, or that you pass on the style prop down to the outermost DOM node. Specifically, the flex is set, so make sure you don't override this.

`javascript
import Carousel from "my-react-carousel";

const NoPass = ({ children }) =>

- slidesToShow
- infinite
- transitionDuration
- centerCurrentSlide

VerticalCarousel

my-react-carousel also exposes a simple vertical carousel implementation. This doesn't have any touch events, so you need to use it together with some kind of external controls such as dots or arrows for it to work properly.

Make sure to have a set height on the surrounding elements to have it flex properly.

`javascript
import VerticalCarousel from "my-react-carousel/dist/VerticalCarousel";

const App = () => (
style={{
height: "500px"
}}
>