Carousel

Scroll-snap slider

A row of slides people swipe or step through — key visuals, episode stills. Only the first slide is sure to be seen, so don't put anything essential after it; for a set people should browse, a Gallery grid shows everything.

Basic

1

2

3

4

5

Key visuals: 1 / 1

slide 1 · autoplay 3s, loops, pauses on hover

<script setup lang="ts">
import { ref } from "vue";
import { BlessCarousel } from "blessing-ui";
const slide = ref(0);
</script>

<template>
  <div style="max-width: 480px">
    <BlessCarousel v-model="slide" :autoplay="3000" loop label="Key visuals">
      <div
        v-for="n in 5"
        :key="n"
        style="
          height: 200px;
          display: grid;
          place-items: center;
          font-size: 48px;
          color: var(--bless-color-on-accent);
          background: var(--bless-color-accent);
        "
      >
        {{ n }}
      </div>
    </BlessCarousel>
    <small>slide {{ slide + 1 }} · autoplay 3s, loops, pauses on hover</small>
  </div>
</template>

Peek

1

2

3

4

5

6

7

Carousel: 1 / 1

perView 2.5 (peek), swipe / scroll-snap, ← →

<script setup lang="ts">
import { BlessCarousel } from "blessing-ui";
</script>

<template>
  <div style="max-width: 480px">
    <BlessCarousel :per-view="2.5" gap="8px" :dots="false">
      <div
        v-for="n in 7"
        :key="n"
        style="
          height: 160px;
          display: grid;
          place-items: center;
          font-size: 32px;
          background: var(--bless-color-surface);
        "
      >
        {{ n }}
      </div>
    </BlessCarousel>
    <small>perView 2.5 (peek), swipe / scroll-snap, ← →</small>
  </div>
</template>

• Native scroll snapping underneath, so touch swipe and trackpads work as expected, including right-to-left pages. arrows and dots step through; each dot names its slide.

Usage

import { BlessCarousel } from "blessing-ui";

API

Props

Name	Type	Default	Description
perView	number	1	slides per view; fractional ok (1.2 = peek)
gap	string	"var(--bless-space-3)"
loop	boolean	false
autoplay	number	0	ms; 0 = off
dots	boolean	true
arrows	boolean	true
label	string	"Carousel"
prevLabel	string	"Previous slide"
nextLabel	string	"Next slide"
pauseLabel	string	"Pause slides"	the autoplay button's name; its pressed state says whether it's paused
modelValue	number	0

Events

Name	Payload	Description
update:modelValue	[value: number]

Slots

Name	Scope	Description
default	—

Exposed

Name	Type	Description
go	(i: number, smooth?: boolean) => void
next	() => void
prev	() => void