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>