Slider

Type: React component

How to get Slider?

JavaScript

import { Slider } from 'fds/components';

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

  1. activeSlideIndex

    (Required)

    Type: Number

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

  2. children

    (Required)

    Type: ReactNode | Function

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

  3. maxTransitionDurationInMs

    (Optional)

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

  4. onTransitionEnd

    (Optional)

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

    Default value

  5. paddingSize

    (Optional)

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