Carousel · Elements

#Basic usage

carousel/basic Vue React

1 / 3

carousel/basic.vue

<script setup lang="ts">
import { chevron_left, chevron_right } from "@bysages/icons";
import { Carousel, Icon } from "@bysages/vue";

const slides = ["Chapter One", "Chapter Two", "Chapter Three"];
</script>

<template>
  <Carousel.Root :slide-count="slides.length">
    <Carousel.Control>
      <Carousel.PrevTrigger>
        <Icon :glyph="chevron_left" />
      </Carousel.PrevTrigger>
      <Carousel.ProgressText />
      <Carousel.NextTrigger>
        <Icon :glyph="chevron_right" />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.ItemGroup>
      <Carousel.Item v-for="(slide, i) in slides" :key="slide" :index="i">
        {{ slide }}
      </Carousel.Item>
    </Carousel.ItemGroup>
    <Carousel.IndicatorGroup>
      <Carousel.Indicator v-for="(_, i) in slides" :key="i" :index="i" />
    </Carousel.IndicatorGroup>
  </Carousel.Root>
</template>

#Props

#AutoplayIndicator

Prop	Type	Default	Description
`fallback`	`string`		The fallback content to render when autoplay is paused.

#AutoplayTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#IndicatorGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

Prop	Type	Default	Description
`index`	`number`		The index of the indicator.
`readOnly`	`boolean \| undefined`	`false`	Whether the indicator is read only.

#ItemGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`index`	`number`		The index of the item.
`snapAlign`	`"start" \| "end" \| "center" \| undefined`	`"start"`	The snap alignment of the item.

#NextTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#PrevTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ProgressText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`allowMouseDrag`	`boolean`	`false`	Whether to allow scrolling via dragging with mouse
`autoplay`	`boolean \| { delay: number; }`	`false`	Whether to scroll automatically. The default delay is 4000ms.
`autoSize`	`boolean`	`false`	Whether to enable variable width slides.
`defaultPage`	`number`	`0`	The initial page to scroll to when rendered. Use when you don't need to control the page of the carousel.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; item(index: number): string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator(index: number): string; }>`		The ids of the elements in the carousel. Useful for composition.
`inViewThreshold`	`number \| number[]`	`0.6`	The threshold for determining if an item is in view.
`loop`	`boolean`	`false`	Whether the carousel should loop around.
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	The orientation of the element.
`padding`	`string`		Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.
`page`	`number`		The controlled page of the carousel.
`slideCount`	`number`		The total number of slides. Useful for SSR to render the initial ating the snap points.
`slidesPerMove`	`number \| 'auto'`	`"auto"`	The number of slides to scroll at a time. When set to `auto`, the number of slides to scroll is determined by the `slidesPerPage` property.
`slidesPerPage`	`number`	`1`	The number of slides to show at a time.
`snapType`	`'proximity' \| 'mandatory'`	`"mandatory"`	The snap type of the item.
`spacing`	`string`	`"0px"`	The amount of space between items.
`translations`	`carousel.IntlTranslations`		The localized messages to use.