javascript - 尝试使用 vue js 组件创建引导轮播

Question

我正在尝试使用 mdb 在带有 Vue 的 Laravel 项目中实现轮播：https ://mdbootstrap.com/docs/vue/advanced/carousel/

我正在尝试转换每张幻灯片：

<mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" mask="black-light" alt="First slide">
  <mdb-carousel-caption title="Light mask" text="First text"></mdb-carousel-caption>
</mdb-carousel-item>

进入一个 Vue 组件，像这样：

<carouselitem picture="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" title="First slide" text="First text"></carouselitem>

所以我有 2 个组件：carousel 和 carouselitem，我从 Home 组件中调用它们，我想在其中实现滑块：

<template>
  <carousel>
    <carouselitem picture="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" title="First slide" text="First text"></carouselitem>
    <carouselitem picture="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" title="Second slide" text="Second text"></carouselitem>
    <carouselitem picture="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" title="Third slide" text="Third text"></carouselitem>
  </carousel>
<template>

<script>
import carousel from '../components/Carousel.vue';
import carouselitem from '../components/Carousel_item.vue';

export default {
  name: 'Index',
  components: {
    carousel,
    carouselitem
  }
}
</script>

这是轮播组件：

<template>
  <mdb-carousel :interval="8000" showControls showIndicators>
    <slot></slot>
  </mdb-carousel>
</template>

<script>
import { mdbCarousel, mdbCarouselItem, mdbCarouselCaption } from 'mdbvue';

export default {
  name: 'ThumbnailsCarouselPage',
  components: {
    mdbCarousel,
    mdbCarouselItem,
    mdbCarouselCaption
  }
}
</script>

这是轮播组件：

<template>
  <mdb-carousel-item img v-bind:src="picture" mask="black-light" v-bind:alt="title">
    <mdb-carousel-caption v-bind:title="title" v-bind:text="text"></mdb-carousel-caption>
  </mdb-carousel-item>
</template>

<script>
import { mdbCarouselItem, mdbCarouselCaption } from 'mdbvue';

export default {
  name: 'carouselitem',
  props: ['picture','title','text'],
  components: {
    mdbCarouselItem,
    mdbCarouselCaption
  }
}
</script>

现在的问题是我只能看到第一张图片，它不会滑到下一张。

控制台中没有错误。

bootstrap-vue 和 mdbvue 已正确安装。

当我只是从 mdb 网站复制并粘贴代码时它可以正常工作，但当我将其转换为组件时就不行了。

有任何想法吗？

标签： javascripthtmlvue.jsbootstrap-4vue-component