v-extended-carousel

Helper carousel component for vuetify's carousel.

Build and publish

This package uses rollup.js in order to bundle the components to es5 and ssr builds. In case you need to re-build the package and push it to npm:

npm run r:build
npm publish

Installation

npm i v-extended-carousel

Create a new plugin: plugins/v-extended-carousel.js:

import Vue from "vue"
import { Vmic, VNextGenImg } from "v-extended-carousel"

Vue.component("Vmic", Vmic)
Vue.component("VNextGenImg", VNextGenImg)

Register the plugin under assets/configs/nuxt.js (or when using a fresh nuxt install nuxt.conf.js in the main project folder):

import { components as vecComponents, directives as vecDirectives } from "v-extended-carousel/assets/treeshake"
const plugins = [
  ...
  {
    src: "@/plugins/v-extended-carousel.js",
    mode: "client"
  },
  ...
]
..
let treeShakeComponents = [...vscmsComponents, ...vlhComponents, ...vesComponents]
let treeShakeDirectives = [...vscmsDirectives, ...vlhDirectives, ...vesDirectives]

const vuetify = {
  customVariables: ["~/assets/style/variables.scss"],
  treeShake: {
    components: Array.from(new Set(treeShakeComponents)),
    directives: Array.from(new Set(treeShakeDirectives))
  },
  ..
}
..

Vmic - vuetify multi-items carousel

Props

props: {
  items: {
    type: Array as PropType<Array<VmicItem>>,
    required: true
  },
  title: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: ""
  },
  name: {
    type: String,
    required: true
  },
  minWidth: {
    type: Number,
    default: 645
  },
  minItems: {
    type: Number,
    default: 1
  },
  maxWidth: {
    type: Number,
    default: 1070
  },
  maxItems: {
    type: Number,
    default: 3
  }
}

VmicItem structure:

interface VmicItem {
  index: number,
  id?: string,
  title: string,
  text: string,
  media: string,
  path: string
}

Remark: media prop could be an image URL or an mdi-icon that is shown at the top of the carouse card.

Vmic is a wrapper to the VMultiItemsCarousel that is passing the VMultiItemsCarouselCard component to the VMultiItemsCarousel. If you wish to change this behavior use the VMultiItemsCarousel component directly instead.

Passing a component slot to VMultiItemsCarousel:

<template slot-scope="cardProps">
  <div class="fill-height">
    <VMultiItemsCarouselCard
      :cid="cardProps.id"
      :title="cardProps.name"
      :text="cardProps.text"
      :media="cardProps.image"
      :group="name"
      :path="cardProps.path"
    />
  </div>
</template>

VMultiItemsCarousel default props:

props: {
  // carousel items passed from vmic
  items: {
    type: Array,
    required: true
  },
  // number of items showen at the same time, passed from vmic
  itemsNum: {
    type: [Number, String],
    default: 3
  },
  // number of items to pass in a single click
  perClick: {
    type: [Number, String],
    defualt: 2
  },
  //
  // v-carousel props 
  //
  interval: {
    type: Number,
    default: 5000
  },
  progressColor: {
    type: String,
    default: "primary"
  },
  cycle: {
    type: Boolean,
    default: true
  },
  hideDelimiters: {
    type: Boolean,
    default: false
  },
  hideCarouselArrows: {
    type: Boolean,
    default: false
  }
}

Rules:

• items - layout: items are organized in a "loop". Example: 4 items passed to VMultiItemsCarousel (item 1-4) Step 1: (item 1 -> item 2 -> item 3) are visible Step 2: (item 4 -> item 1 -> item 2) are visible ... - size: 1-3 item/s carousel - 4 columns each item 4+ items carousel - parseInt(12 / #items)
• cycle - active if cycle prop is set to true and the number of items passed to VMultiItemsCarousel is greater than itemsNums+1 (enabled at 4 items or more by default).
• height - set by the size of the largest item in the VMultiItemsCarousel. The VMultiItemsCarouselCard component emits an event with the height of the component. After each card emitted its height the largest height is then passed as a prop to the VMultiItemsCarousel. Because the card is only loaded after the VMultiItemsCarousel a small delay is required (10ms).
• delimiters - enabled if hideDelimiters is set to true and if cycle is active.
• progressBar - an alternative to the delimiters. Enabled if hideDelimiters is set to false and if cycle is active. **

NewsCarousel

A carousel that takes images and news carousel items* and shows the title, tag and a button leading to a slug.

props: {
  items: {
    type: Array as PropType<Array<NewsCarouselItem>>,
    required: true
  },
  images: {
    type: Array as PropType<Array<string>>,
    default: null
  }
}

NewsCarouselItem structure:

export interface NewsCarouselItem {
  index: number,
  id?: string,
  name: string,
  createdAt?: Date,
  updatedAt?: Date,
  createdBy?: string,
  topics: string, // an array string - required JSON.parse to turn to array
  draft?: boolean,
  internal?: boolean,
  short?: string,
  text?: string // markdown string,
  slug: string
}

Remark 1: images prop is an array of URLs.

VNextGenImg

Both types of carousel components use under the hood the VNextGenImg component.

<template>
  <v-img v-bind="$attrs" v-on="$listeners" :src="src" :srcset="imgSrc" />
</template>

<script lang="ts">
import Vue from "vue"

export default Vue.extend({
  name: "VNextGenImg",
  props: {
    src: {
      type: String,
      required: true
    }
  },
  computed: {
    imgSrc (): string {
      const imgSrc = this.src.split(".")
      imgSrc.pop()
      return `${imgSrc.join(".")}.webp`
    }
  }
})
</script>