Carousel

Overview

The Carousel component in UiKit offers a versatile way to display images and videos in a responsive and interactive format. It supports thumbnail navigation, dynamic data binding, and customization is available through SASS variables in files such as ui-kit/src/components/VCarousel/index.sass or ui-kit/src/styles/components/_carousel.sass, allowing you to adjust aspects like spacing, colors, and button styles.

Basic Usage

This component uses Swiper library https://swiperjs.com/.

First, ensure that the Swiper library is installed. If not, add it to your project using:

yarn add swiper
yarn add @vimeo/player

To add the VCarousel component, start by importing it into your Vue file:

import VCarousel from 'UiKit/components/VCarousel/VCarousel.vue';

Example

Place the component in your template like this:

<VCarousel
    :name="carouselTitle"
    :files="carouselFiles"
    :active-item-by-url
/>

• name: Title or alt text for the carousel.
• files: Array of image and video objects to display.
• active-item-by-url: Boolean to indicate if active items should be synced with the URL.

File Data Example

const carouselFiles = [
  {
    name: 'Image Slide 1',
    meta_data: {
      big: '/images/slide1-large.jpg',
      small: '/images/slide1-thumb.jpg',
    },
  },
  {
    name: 'Video Slide 1',
    video: 'https://youtu.be/sample-video-url',
  },
  {
    name: 'Image Slide 2',
    meta_data: {
      big: '/images/slide2-large.jpg',
      small: '/images/slide2-thumb.jpg',
    },
  },
];

Component Props

defineProps({
  name: String,
  files: {
    type: Array,
    default: () => [],
  },
  activeItemByUrl: Boolean,
});

• name: The text used as alt/title for images.
• files: An array of image and video objects with optional metadata (meta_data).
• activeItemByUrl: Enables URL-based navigation if true.

Carousel Files Data Structure

The component expects an array of objects for the files prop. Each file object can contain:

• name: Name or title of the file.
• meta_data: Object with big and small image URLs.
• video: (Optional) URL of a video file to embed.

Example File Object

{
  name: 'Example Image',
  meta_data: { big: '/images/example-large.jpg', small: '/images/example-thumb.jpg' },
}

Thumbnail Navigation

The component includes thumbnail navigation, which updates automatically based on the items.

Handling Click Events

You can listen to a click event on the carousel:

<VCarousel
    :files="carouselFiles"
    @click="handleClick"
/>

const handleClick = () => {
  console.log('Carousel item clicked');
};

Complete Example

<script setup lang="ts">
import VCarousel from 'UiKit/components/VCarousel/VCarousel.vue';

const carouselTitle = 'Gallery';
const carouselFiles = [
  { name: 'Image 1', meta_data: { big: '/images/img1-large.jpg', small: '/images/img1-thumb.jpg' } },
  { name: 'Video 1', video: 'https://youtu.be/example-video' },
  { name: 'Image 2', meta_data: { big: '/images/img2-large.jpg', small: '/images/img2-thumb.jpg' } }
];

const handleClick = () => {
  console.log('Slide clicked');
};
</script>

<template>
  <VCarousel
    :name="carouselTitle"
    :files="carouselFiles"
    :active-item-by-url="true"
    @click="handleClick"
  />
</template>

This example demonstrates how to use the VCarousel component with image and video slides, URL-based navigation, and click events.

Problems

This is very specific case component If we need to add, for example, pagination we have to modify base component

Advantages

• Since we use Swiper in multiple components, it fits well into our project without the need for additional libraries.
• Swiper is a comprehensive library with extensive options, making it adaptable for future use cases.