Slide

Slide 3

previous
next

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 slides

Props
---

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

#### children

Type: any

Default: 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.

#### arrows

Type: boolean

Default: false

Render previous / next buttons to navigate carousel. Default arrows are
rendered as elements. arrowClassName and modifierLeftClassName
applied to the 'Previous' button, and arrowClassName and
modifierRightClassName are applied to 'Next' button.

#### dots

Type: boolean

Default: false

Render one button per slide to navigate / indicate carousel state. Default dots
are rendered as

elements. dotClassName is applied, as well as
modifierCurrentClassName to the button that matches the current slide.

#### disableNativeScroll

Type: boolean

Default: false

It true, modifierDisableScrollClassName is applied to .rc element

#### draggable

Type: boolean

Default: false

If true, enables grabbing and dragging the slider with the mouse to change
its scroll value.

NOTE: When false, it only prevents dragging with mouse, it does not prevent
dragging with touch events in devices that support it

#### infinite

Type: boolean

Default: false

If true, the carousel will navigate to the first / last slide if attempting
to navigate out of bounds

#### keyboardControl

Type: boolean

Default: false

If true, enables focusing the .rc element. While focused, you are able to
switch slides using the left and right arrow keys.

#### resetCurrentOnResize

Type: boolean

Default: true

If true, carousel will re-render with the current state after the window has
been resized. This operation is debounced by 200ms.

#### swapOnDragMoveEnd

Type: boolean

Default: true

If true, the carousel will change the current slide, to an adjacent one,
based on the direction of the drag movement.
Although, if the drag is enough to change the current slide by itself, it will
respect that behaviour.

Notes: Only works if the draggable prop is set as true.

#### autoplayIntervalMs

Type: number

Default: 0

The number of milliseconds to wait between automatic slide advancement. A value
of 0 turns off autoplay.

#### autoplayDirection

Type: oneOf(['ltr', 'rtl'])

Default: 'ltr'

The direction that the carousel should change the slides when
autoplayIntervalMs > 0. Can be one of:

- 'ltr': causes carousel to change slides from left to right
- 'rtl': causes carousel to change slides from right to left

#### offset

Type: number or function

Default: 0

The horizontal padding given to .rc-slider.

If it is a number, is treated as a value in pixels.

If it is a function, its signature is:

`
({ animating: boolean, dragging: boolean, current: number }) => number
`

It is expected that the returned number represents a value in pixels.

#### slideSnapEasing

Type: function or oneOf(['linear', 'ease-in', 'ease-out', 'ease-in-out'])

Default: ease-in-out

Easing function applied to snapping animation.

You may instead provide your own easing function if the supplied ones are not
suitable. slideSnapEasing also accepts a function, (value: number) =>
number. Return value must be in the [0.0, 1.0] range.

#### slideSnapDuration

Type: number

Default: 150

Number of milliseconds that the snapping animation takes to complete.

#### slideTransitionEasing

Type: function or oneOf(['linear', 'ease-in', 'ease-out', 'ease-in-out'])

Default: ease-in-out

Easing function applied to transition animation.

You may instead provide your own easing function if the supplied ones are not
suitable. slideTransitionEasing also accepts a function, (value: number) =>
number. Return value must be in the [0.0, 1.0] range.

#### slideTransitionDuration

Type: number

Default: 300

Number of milliseconds that the transition animation takes to complete.

#### touchSwipeVelocityThreshold

Type: number

Default: 0.3

Note: Only applicable when disableNativeScroll = true.

The velocity in pixels per frame where a swipe causes the slide to change

#### touchCrossAxisScrollThreshold

Type: number

Default: 0.45

Note: Only applicable when disableNativeScroll = true.

The velocity in pixels per frame in the cross axis (currently just y axis)
below where a diagonal swipe on the carousel will prevent vertical scrolling

#### current

Type: number

Default: undefined

If set, makes the Carousel as a controlled
component, allowing
you to control the current slide from outside the scope of the Carousel. This
will not disable any internal state management, and beforeChange /
afterChange props will still be called, so you will be responsible for
syncing your external state with the internal one of the Carousel.

#### beforeChange

Type: function

Default: () => {}

Callback function that is called before a slide change happens.

Its signature is ({ current: number, next: number, source: 'user' | 'autoplay' }) => void

#### afterChange

Type: function

Default: () => {}

Callback function that is called after a slide change happens. Function is only
called after transitions have ended and internal state is updated.

Its signature is ({ previous: number, current: number, source: 'user' | 'autoplay' }) => void

#### renderArrows

Type: (props: object) => React.Node

Default: undefined

If a function is provided to renderArrows prop, the default arrows will not
be rendered, and you may use this render prop to render your own
arrows.

props has the following shape:

`js
{
next: () => void, // call this to change to the next (right) slide
previous: () => void, // call this to change to the previous (left) slide
current: number, // index of the current slide
animating: boolean, // boolean indicating that a transition or snap is happening
dragging: boolean, // boolean indicating that the carousel is being dragged by a mouse
slideCount: number, // number indicating how many slides are rendered by the carousel
}
`

#### renderDots

Type: (props: object) => React.Node

Default: undefined

If a function is provided to renderDots prop, the default dots will not
be rendered, and you may use this render prop to render your own dots.

props has the following shape:

`js
{
setCurrent: (i: number) => void, // call this to change to slide with index i
current: number, // index of the current slide
animating: boolean, // boolean indicating that a transition or snap is happening
dragging: boolean, // boolean indicating that the carousel is being dragged by a mouse
}
`

$3

You may append the default classNames rendered by with your own classNames. Each type of
element has its own className, and some of them also have modifier classNames
applied.

#### wrapperClassName

Type: string

Default: undefined

Applied to top level element rendered by , .rc-wrapper. It will have
.rc, .rc-arrow and .rc-dots elements as its direct descendants.

#### carouselClassName

Type: string

Default: undefined

Applied to scrollable element.

Expected to have at least overflow: x; -webkit-overflow-scrolling: touch applied.

#### sliderClassName

Type: string

Default: undefined

Applied to slides container element. This element can be larger than the full
width of the viewport, and is scrolled by its direct parent, the .rc element

#### arrowClassName

Type: string

Default: undefined

Applied to "previous" and "next"

elements rendered by default when
arrows is true and no custom renderArrows prop is provided.

#### dotContainerClassName

Type: string

Default: undefined

Applied to container

element that holds the dots rendered by default
when dots is true and no custom renderDots prop is provided.

#### dotClassName

Type: string

Default: undefined

Applied to each individual

dot element rendered by default when
dots is true and no custom renderDots prop is provided.

$3

#### modifierDraggableClassName

Type: string

Default: undefined

Appended to .rc-slider.-draggable when draggable prop is true.

#### modifierDraggingClassName

Type: string

Default: undefined

Appended to .rc-slider.-draggable.-dragging when carousel is being dragged by
mouse. Useful to change icons.

#### modifierCurrentClassName

Type: string

Default: undefined

Appended to .rc-slide.-current and .rc-dot.-current elements. Represents
the currently selected slide / dot.

#### modifierLeftClassName

Type: string

Default: undefined

Appended to .rc-arrow.-left that switches to the previous (left) slide.

#### modifierRightClassName

Type: string

Default: undefined

Appended to .rc-arrow.-right` that switches to the next (right) slide

Future work
---

- [ ] Infinite mode
- [x] enable / disable
- [x] bounce
- [ ] wrap around
- [ ] Current slide placement options
- [x] left
- [ ] center
- [ ] right
- [ ] Vertical carousel and vertical placement options
- [ ] top
- [ ] center
- [ ] bottom