Fully stylable, CSS oriented carousel
npm install @moxy/react-carouselA React carousel component that aims to be as flexible as possible.
Installation
---
``sh`
npm i -S @moxy/react-carousel
or
`sh`
yarn add @moxy/react-carousel
This library is written in modern JavaScript and is published in both CommonJS
and ES module transpiled variants. If you target older browsers please make
sure to transpile accordingly.
Motivation
---
After analysing and testing a number of different carousel solutions for react,
MOXY determined that none of the existing solutions
would be a good candidate the numerous projects that we develop as an agency.
As such, we set out to build an extensible, easy to use, small carousel
component.
This project is still a work in progress. You can see what is currently missing
in Future Work.
- Uses the minimum amount of dependencies.
- The only direct dependency is lodash.debounce.scroll-snap
- Does not highjack native scrolling functionality unless desired.
- Respects native browser scrolling behaviour (desktop and mobile), and only aims to augment its capabilities.
- Once Safari fixes its issues with and programmatic manipulation of scrollLeft / scrollTop, js-based snapping behaviour can be dropped in favor of scroll-snap.scrollLeft
- Manipulates carousel state by changing property.offset
- Does not use inline styles for controlling behaviour (except ); all behaviour is controlled via className exchange and CSS rules. All classNames can be customized.@moxy/react-carousel
- Developer / designer oriented: does not assume or enforce a particular style of carousel, and provides a lot of options for customizing its behaviour.
- Provides callbacks before and after current slide changes
Usage
---
@moxy/react-carousel does not make any assumptions on what elements your
slides represent. They can be a
, an , or any other element. They
can also be react components, but you must be aware that the key,
onMouseUp, onDragStart, and onDrag will be overriden. className prop
will be appended to @moxy/react-carousel's classNames.$3
`js
import Carousel from '@moxy/react-carousel';
Slide 1
Slide 2
Slide 3
Slide 4
`$3
`js
import Carousel from '@moxy/react-carousel'; arrows
renderArrows={ ({ previous, next }) => (
<>
>
)}>
Slide 1
Slide 2
Slide 3
Slide 4
`There is a lot more than you can do, check out the
demo, where you can easily
explore different prop values and prop combinations.
HTML Structure
---
`js
Slide 1

Slide 3
`will render:
`js
Slide

`CSS
---
There isn't one definitive implementation suitable for
@moxy/react-carousel.A default stylesheet is shipped with the package, and can
be imported with:
`
import @moxy/react-carousel/dist/styles.css
`You can use this stylesheet as is and build on top of it, or use it as
inspiration for your own styles. The default styles sets
.rc-slide to
display: inline-block, and, .rc-slider to white-space: nowrap so that
slides are positioned horizontally. You could achieve the same effects with
float, flexbox, etc. Because the position for the current slide is
calculated based on the distance from the element to its parent, it also allows
for different size slidesProps
---
| Prop | Type | Required | Default |
| --- | --- | --- | --- |
|
children | any | yes | undefined |
| arrows | boolean | no | false |
| dots | boolean | no | false |
| disableNativeScroll | boolean | no | false |
| draggable | boolean | no | false |
| infinite | boolean | no | false |
| keyboardControl | boolean | no | false |
| resetCurrentOnResize | boolean | no | true |
| swapOnDragMoveEnd | boolean | no | true |
| autoplayIntervalMs | number | no | 0 |
| autoplayDirection | string | no | 'ltr' |
| offset | number or function | no | 0 |
| slideSnapEasing | string or function | no | ease-in-out |
| slideSnapDuration | number | no | 150 |
| slideTransitionEasing | string or function | no | ease-in-out |
| slideTransitionDuration | number | no | 300 |
| touchSwipeVelocityThreshold | number | no | 0.3 |
| touchCrossAxisScrollThreshold | number | no | 0.45 |
| current | number | no | undefined |
| beforeChange | function | no | () => {} |
| afterChange | function | no | () => {} |
| renderArrows | function | no | undefined |
| renderDots | function | no | undefined |
| wrapperClassName | string | no | undefined |
| carouselClassName | string | no | undefined |
| sliderClassName | string | no | undefined |
| arrowClassName | string | no | undefined |
| dotContainerClassName | string | no | undefined |
| dotClassName | string | no | undefined |
| modifierDraggableClassName | string | no | undefined |
| modifierDraggingClassName | string | no | undefined |
| modifierCurrentClassName | string | no | undefined |
| modifierLeftClassName | string | no | undefined |
| modifierRightClassName | string | no | undefined |API
---
####
childrenType:
anyDefault:
undefined@moxy/react-carousel assumes that any direct descendants of the
component are the slides that you wish to render. It makes no assumptions on
what those elements should be, or their dimensions.####
arrowsType:
booleanDefault:
falseRender previous / next buttons to navigate carousel. Default arrows are
rendered as