Video link instead of image in MDB Vue carousel


Topic: Video link instead of image in MDB Vue carousel

pienaahj asked 2 years ago

Expected behavior

Render video instead of image in MDB Vue carousel. If possible, what is the syntax? I found it in the standard version, but cannot find it in vue vesion.

Actual behavior

In the const items: we have src: (link to the wed image).

How do I change this to video link?

Resources (screenshots, code snippets etc.)

<template>
 <MDBCarousel
      v-model="carousel6"
    :items="items6"
    :indicators="false"
    fade

/>

import { ref } from "vue"; import { MDBCarousel } from "mdb-vue-ui-kit"; export default { components: { MDBCarousel }, setup() { const items6 = [ { src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp", alt: "...", label: "First slide label", caption: "Nulla vitae elit libero, a pharetra augue mollis interdum." }, etc... ]; const carousel6 = ref(0); return { items6, carousel6 }; } };


pienaahj answered 2 years ago

Many thanks. Highly appreciated!


Mateusz Trochonowicz staff pro premium priority answered 2 years ago

Hi! If you want to display video instead of an image, you have to put in item object value video instead of src. Following this there is another value, optional: videoType. This is a new feature and missing description in documentation. Sorry about that.

Keep coding!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 2.0.0
  • Device: iMac
  • Browser: Chrome
  • OS: macOS 10.15.7
  • Provided sample code: No
  • Provided link: Yes