Carousel
Overview
The VCarousel
component is designed to display a carousel of images or videos. It supports autoplay functionality and allows users to navigate through items using previous and next buttons. Location - ui-kit/src/components/VCarousel.vue
. It is build using components from shadcn library
Features
- Dynamic Content: Supports displaying images and videos in a carousel format.
- Autoplay Functionality: Automatically transitions between items.
- Navigation Controls: Includes previous and next buttons for manual navigation.
Importing the Component
To use the VCarousel
component, import it as follows:
vue
import VCarousel from 'UiKit/components/VCarousel.vue';
Component Props
The component accepts the following props:
Prop Name | Type | Default | Required | Description |
---|---|---|---|---|
name | String | undefined | No | The name of the carousel. |
files | Array | [] | No | An array of items (images or videos) to display in the carousel. |
activeItemByUrl | Boolean | false | No | If true, the carousel will set the active item based on the URL parameter. |
Full Example
vue
<script setup lang="ts">
import VCarousel from 'UiKit/components/VCarousel.vue';
const carouselItems = [
{ meta_data: {
big: 'https://webdevelop-us-media-thumbs.storage.googleapis.com/filer/a011b64970c3652ff9612b0e56d6fc4c06792add_big.webp',
small: 'https://webdevelop-us-media-thumbs.storage.googleapis.com/filer/a011b64970c3652ff9612b0e56d6fc4c06792add_small.webp' } },
{ video: 'https://www.youtube.com/watch?v=mUxzKVrSAjs' },
];
</script>
<template>
<VCarousel :files="carouselItems" :activeItemByUrl="true" />
</template>