Images

Default

Place s-image elements inside s-images.

Code copied

<template>
  <s-images>
    <s-image src="https://picsum.photos/seed/vs1/300" preview />
    <s-image src="https://picsum.photos/seed/vs2/300" />
    <s-image src="https://picsum.photos/seed/vs3/300" />
    <s-image src="https://picsum.photos/seed/vs4/300" />
  </s-images>
</template>

Preview and fit

Set preview to open the shared image viewer. preview-src-list supports a custom gallery; fit, width, and height control single item rendering without changing grid styling.

Code copied

<template>
  <s-images
    ><s-image
      src="https://picsum.photos/seed/preview/520/260"
      :preview-src-list="photos"
      preview
      fit="contain"
      width="260"

Hover

Pick a hover animation: zoom, blur, dark, scale, or curtain.

Code copied

<template>
  <div class="center">
    <s-images hover="zoom">
      <s-image src="https://picsum.photos/seed/z1/300" />
      <s-image src="https://picsum.photos/seed/z2/300" />
    </s-images>
    <s-images hover="blur">
      <s-image src="https://picsum.photos/seed/b1/300" />
      <s-image src="https://picsum.photos/seed/b2/300" />
    </s-images>
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

More Options

Fine-tune spacing and corners with alternating and margin props.

Code copied

<template>
  <s-images alternating not-margin>
    <s-image src="https://picsum.photos/seed/m1/300" />
    <s-image src="https://picsum.photos/seed/m2/300" />
    <s-image src="https://picsum.photos/seed/m3/300" />
    <s-image src="https://picsum.photos/seed/m4/300" />
  </s-images>
</template>

API