mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 08:23:47 +09:00
63 lines
1.3 KiB
Markdown
63 lines
1.3 KiB
Markdown
---
|
|
items:
|
|
- src: http://via.placeholder.com/600x400
|
|
thumbnail: http://via.placeholder.com/60x40
|
|
w: 600
|
|
h: 400
|
|
alt: 'optional alt attribute for thumbnail image'
|
|
- src: http://via.placeholder.com/1200x900
|
|
thumbnail: http://via.placeholder.com/120x90
|
|
w: 1200
|
|
h: 900
|
|
- src: http://via.placeholder.com/800x600
|
|
thumbnail: http://via.placeholder.com/80x60
|
|
w: 800
|
|
h: 600
|
|
---
|
|
|
|
### Thumbnail Gallery
|
|
|
|
We wrote a custom Vue wrapper for the `Photo Swipe` library so it makes it easy
|
|
for you to create image galleries seamlessly. Pass an array of `items` to
|
|
generate your gallery.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const items = [
|
|
{
|
|
src: 'http://via.placeholder.com/600x400',
|
|
thumbnail: 'http://via.placeholder.com/60x40',
|
|
w: 600,
|
|
h: 400,
|
|
alt: 'optional alt attribute for thumbnail image',
|
|
},
|
|
{
|
|
src: 'http://via.placeholder.com/1200x900',
|
|
thumbnail: 'http://via.placeholder.com/120x90',
|
|
w: 1200,
|
|
h: 900,
|
|
},
|
|
{
|
|
src: 'http://via.placeholder.com/800x600',
|
|
thumbnail: 'http://via.placeholder.com/80x60',
|
|
w: 800,
|
|
h: 600,
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VPhotosSwipe :items="items" />
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VPhotosSwipe :items="frontmatter.items" />
|
|
|
|
<!--/example-->
|