shoka-gallery v1.0.0-alpha.7

Shoka Gallery

Super simple a11y headless image gallery for Vue 3 users

Example

More examples: playground

Installation

# npm:
npm install shoka-gallery

# pnpm:
pnpm add shoka-gallery

Usage

Use as Vue plugin

import { createApp } from 'vue'
import { ShokaGallery } from 'shoka-gallery'
import App from './App.vue'

const app = createApp(App)

app.use(ShokaGallery)
app.mount('#app')

Direct import

<script setup>
import { Gallery, GalleryItem, GalleryPanel, GalleryImage, GalleryCaption } from 'shoka-gallery'
</script>
<template>
  <Gallery>
    <GalleryPanel>
      <GalleryImage> Loading.... </GalleryImage>
      <GalleryCaption />
    </GalleryPanel>

    <GalleryItem>
      <img src="..." />
    </GalleryItem>

    <GalleryItem>
      <img src="..." />
    </GalleryItem>

    <GalleryItem>
      <img src="..." />
    </GalleryItem>
  </Gallery>
</template>

Keyboard interaction

Component API

Gallery

GalleryItem

GalleryPanel

GalleryImage

GalleryCaption

GallerySwipe

GallerySwipeItem