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 NameTypeDefaultRequiredDescription
nameStringundefinedNoThe name of the carousel.
filesArray[]NoAn array of items (images or videos) to display in the carousel.
activeItemByUrlBooleanfalseNoIf 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>
Help Ukraine to stop russian aggression