oa/documentation/plugins/gallery/gallery-images-rounded-documentation.md

items

items
src thumbnail w h alt http://via.placeholder.com/600x400 http://via.placeholder.com/60x40 600 400 optional alt attribute for thumbnail image src thumbnail w h http://via.placeholder.com/1200x900 http://via.placeholder.com/120x90 1200 900 src thumbnail w h http://via.placeholder.com/800x600 http://via.placeholder.com/80x60 800 600

Rounded Thumbnails

We wrote a custom Vue wrapper for the Photo Swipe library so it makes it easy for you to create image galleries seamlessly. Thumbnails border radius is configurable. Pass a value of full to the thumbnailRadius to show curved borders.

<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" thumbnail-radius="full" />
</template>