@squiz/xaccel-slider v1.15.0-beta.1
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"
/>
21 days ago
21 days ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago