Vue

First, follow the installation instructions to add the NPM package @fancyapps/ui.

Use this sample code for the Carousel Vue wrapper or create your own based on it:

<script>
import { ref } from "vue";

import { Carousel } from "@fancyapps/ui/dist/carousel/";
import "@fancyapps/ui/dist/carousel/carousel.css";

export default {
  props: {
    carouselOptions: Object,
  },
  setup() {
    const fcInstance = ref(null);

    return {
      fcInstance,
    };
  },
  mounted() {
    this.fcInstance = Carousel(this.$refs.container, {
      ...(this.carouselOptions || {}),
    }).init();
  },
  unmounted() {
    if (this.fcInstance) {
      this.fcInstance.destroy();
      this.fcInstance = null;
    }
  },
};
</script>

<template>
  <div ref="container" class="f-carousel">
    <slot></slot>
  </div>
</template>

Usage:

<Carousel
  :carousel-options="{
    // Your custom options
  }"
>
  <div class="f-carousel__slide">1</div>
  <div class="f-carousel__slide">2</div>
  <div class="f-carousel__slide">3</div>
</Carousel>