Slider

The license could not be verified: License Certificate has expired!

How to get Slider

import { Slider } from 'fds/components';

Type: Component

Slider creates a full size container (with flex: 1) in which child Slide components should be placed. It shows a single Slide at once, based on the activeSlideIndex prop. Whenever that prop changes after the initial render, a dynamic CSS animation is used to translate each slide on the x-axis.

Props

# Name Type Description
1. activeSlideIndex Number

The (child) index of the <Slide /> component you want to show. Zero-based.

2. children ReactNode | Function

When using a function, the argument of that function is an object with an isTransitioning parameter.

3. [maxTransitionDurationInMs] Number

The maximum duration in ms of transitioning between two arbitrary slides. Normally, the transition between two adjacent slides is 250ms, this is multiplied by the number of slides to transition, and maxed to whatever you specify here. Defaults to 1000.


  Default value
1000
4. [onTransitionEnd] Function

Callback that is called whenever a slide transition ends and after Slider has re-rendered with isTransitioning set to false. Useful to focus a ref in a slide that has just transitioned.

5. [paddingSize] Number | String | Object

The amount of padding rendered by the component.

This should be a either, A single size value, one of the following values:

  • 0 (zero, no padding at all)

  • 's' (small)

  • 'm' (medium)

  • 'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.

Or you can pass an object whose properties determine a specific padding size for either:

  • 'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)

  • 'vertical': %single size value% to set the 'top' and 'bottom' padding

Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

  Default value
0

Related links

Was this page helpful?