Slider

Description

The most basic usage is just calling the slider component with an array of images (that have the correct format)

Checkout the https://gitlab.squiz.net/plug-and-play/component-library/ storybook and view the Slider component to see the props that can be passed to it.

Components properties

type Image = {
    name: string;
    alt: string;
    caption: string;
    imageVariations: {
        original: {
            url: string;
            width: number;
            height: number;
            byteSize: number;
            mimeType: string;
            aspectRatio: string;
            sha1Hash: string;
        };
    };
};

type Item = {
    image: Image;
};

type ClassNameOverride = {
    className: string;
    cssModule: {
        [key: string]: string;
    };
    retainMissingModuleClasses: boolean;
};

export type SliderProps = {
    activeItem?: number;
    accessibilityTitle?: string;
    sliderHeight?: number;
    images: Array<Item>;
    infinite?: boolean;
    slideHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'none';
    className?: string | ClassNameOverride;
    theme?: 'light' | 'dark';
};

Props Example:

exampleImages: [
    {
        image: {
            name: 'Image 1',
            alt: 'Image alt 1',
            caption: 'Image 1 caption text. At vero eos et accusamus et iusto odio dignissimos ducimus.',
            imageVariations: {
                original: {
                    url: 'https://images.unsplash.com/photo-1690818083154-e4eaa4e8b8ac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80',
                    width: 1298,
                    height: 865,
                    byteSize: 1,
                    mimeType: '',
                    aspectRatio: '',
                    sha1Hash: '',
                },
            },
        },
    },
    {
        image: {
            name: 'Image 2',
            alt: 'Image alt 2',
            caption: 'Image 2 caption text',
            imageVariations: {
                original: {
                    url: 'https://images.unsplash.com/photo-1690695585525-8610507695de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3270&q=80',
                    width: 1947,
                    height: 1298,
                    byteSize: 1,
                    mimeType: '',
                    aspectRatio: '',
                    sha1Hash: '',
                },
            },
        },
    }
];

Usage

First install the package by running: npm i @squiz/xaccel-slider

Basic minimum config example

import Slider from '@squiz/xaccel-slider';

<Slider images={exampleImages} />

Additional props that can be specified

import Slider from '@squiz/xaccel-slider';

<Slider
    accessibilityTitle='Gallery of pictures from artist'
    sliderHeight={500}
    slideHeadingLevel='h3'
    images={exampleImages}
    infinite=true
    activeItem={0}
    className="custom-class"
    theme="light"
/>