MediaCarousel

Slides with scroll snap, indicators and the keyboard. Autoplay pauses on hover and focus and is off when the visitor asked for less motion.

import { MediaCarousel } from '@zairakai/vue-components/Medias'

Usage

<MediaCarousel />

Example

First slide

Second slide

Third slide

<script setup>
  const slides = ['First slide', 'Second slide', 'Third slide']
</script>

<template>
  <MediaCarousel
    :items="slides"
    label="Slides"
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
items	array	[]	The slides: any items, shown with the item slot.
modelValue	number	undefined	The index of the current slide.
autoplay	number	0	Move on by itself, every this many milliseconds. Not when the visitor prefers less motion.
loop	boolean	true	Go back to the first slide after the last.
label	string	'Carousel'
previousLabel	string	'Previous slide'
nextLabel	string	'Next slide'
slideLabel	string	'{n} of {total}'
indicators	boolean	true

Events

Name	Description
update:modelValue

Slots

Name	Description
item

See Theming for the class hooks and the data-* state of the components.