Constructor

# new Slides(props) → {React.ReactElement}

Overview

A component that takes an array of containers and enables user to move between them. The component provides a slide animation when a change of view is requested.

Usage

A programmer should provide the direction of a slide as well as an orientation. It is possible to have different orientations between two distinct slots.

Parameters:

Name	Type	Attributes	Default	Description
`props`	Object
`children`	React.ReactNode	<optional>		The content of the component.
`direction`	"backward" \| "forward"			The direction of current slide.
`duration`	number	<optional>	1000	The duration of a slide in milliseconds.
`getSlotStyle`	function	<optional>		Callback fired when component requests style for current slot.
`mountNeighboursOnly`	boolean	<optional>	true	If `true` only neighbouring slots will be rendered.
`orientation`	"horizontal" \| "vertical"	<optional>	'horizontal'	The orientation of current slide.
`sliding`	boolean			If `true` the component will slide in given direction.
`value`	number	<optional>		The id of current slot.

View Source Utils/Navigation/Slides/Slides.js, line 80

Returns:

Type: React.ReactElement

Methods

# static getHorizontalTransition(sliding, direction, duration) → {Object}

Overview

Creates a horizontal sliding animation.

Parameters:

Name	Type	Description
`sliding`	boolean	If `true` the component will slide in given direction.
`direction`	"backward" \| "forward"	The direction of current slide.
`duration`	number	The duration of a slide in milliseconds.

View Source Utils/Navigation/Slides/Slides.js, line 15

Returns:

The style object with horizontal transformation.

Type: Object

# static getOrder(index, value, count, reverse) → {number}

Overview

Counts the flex order of currently processed slot.

Parameters:

Name	Type	Description
`index`	number	The id of currently processed slot.
`value`	number	The id of currently selected slot.
`count`	number	Number of slots.
`reverse`	boolean	If `true` it means the component is sliding backwards.

View Source Utils/Navigation/Slides/Slides.js, line 52

Returns:

The flex order of currently processed slot.

Type: number

# static getVerticalTransition(sliding, direction, duration) → {Object}

Overview

Creates a vertical sliding animation.

Parameters:

Name	Type	Description
`sliding`	boolean	If `true` the component will slide in given direction.
`direction`	"backward" \| "forward"	The direction of current slide.
`duration`	number	The duration of a slide in milliseconds.

View Source Utils/Navigation/Slides/Slides.js, line 33

Returns:

The style object with vertical transformation.

Type: Object