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;
infinite?: boolean;
slideHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'none';
className?: string | ClassNameOverride;
theme?: 'light' | 'dark';
};
`

$3

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

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

`

Additional props that can be specified

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

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