hb-site-slideshow — site-slideshow

Category: content
Tags: content, media

What it does

Full-viewport image slideshow: pass data as an array of slides (href, optional caption). Supports optional index and timer, dots and captions via CSS parts, and slots overlay, prev, next, cover_on_images. Dispatches slide change and hover events.

Custom element

hb-site-slideshow

Attributes (snake_case; use string values in HTML)

• id (optional), style (optional): strings.
• data (required): JSON string — { href: string; caption?; index? }[].
• index (optional): number as string — initial slide.
• timer (optional): number as string — autoplay interval.

Events

• changeSlide: { index: number }.
• changeHover: { index: number; hover: boolean }.

Usage notes

• CSS parts: dot, caption_container, caption_content, cover_on_images.
• Slots: overlay, prev, next, cover_on_images.
• Declared size metadata: fullscreen layout.

Minimal HTML example

<hb-site-slideshow
  data='[{"href":"https://example.com/a.jpg","caption":"A"},{"href":"https://example.com/b.jpg","caption":"B"}]'
  index="0"
></hb-site-slideshow>