63 lines
1.4 KiB
Text
63 lines
1.4 KiB
Text
import { Meta, Canvas } from '@storybook/blocks';
|
|
|
|
import * as PhotoCarouselStories from './PhotoCarousel.stories.svelte';
|
|
|
|
<Meta of={PhotoCarouselStories} />
|
|
|
|
# PhotoCarousel
|
|
|
|
The `PhotoCarousel` component creates a simple, accessible photo carousel with lazy-loading and mobile swipe built in.
|
|
|
|
```svelte
|
|
<script>
|
|
import { PhotoCarousel } from '@reuters-graphics/graphics-components';
|
|
|
|
const photos = [
|
|
{
|
|
src: 'https://.../myImage.jpg',
|
|
altText: 'A picture of...',
|
|
caption: 'My caption...', // Optional
|
|
credit: 'REUTERS/Jane Doe', // Optional
|
|
objectFit: 'contain', // Optional
|
|
objectPosition: '50% 50%', // Optional
|
|
},
|
|
// ...
|
|
];
|
|
</script>
|
|
|
|
<PhotoCarousel {photos} />
|
|
```
|
|
|
|
<Canvas of={PhotoCarouselStories.Demo} />
|
|
|
|
## Custom text
|
|
|
|
Use named slots to style your own custom credits and/or captions.
|
|
|
|
```svelte
|
|
<PhotoCarousel {photos}>
|
|
<p slot="credit" class="custom-credit" let:credit>{credit}</p>
|
|
<p slot="caption" class="custom-caption" let:caption>{caption}</p>
|
|
</PhotoCarousel>
|
|
|
|
<style lang="scss">
|
|
p {
|
|
position: absolute;
|
|
color: white;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
font-family: sans-serif;
|
|
font-size: 0.8rem;
|
|
padding: 0 5px;
|
|
&.custom-credit {
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
&.custom-caption {
|
|
bottom: 5px;
|
|
left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
```
|
|
|
|
<Canvas of={PhotoCarouselStories.CustomText} />
|