Question

我正在尝试使用mdb：https://mdbootstrap.com/docs/vue/advanced/carousel/

在Vue的Laravel项目中实现轮播

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

<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>

所以我有两个组件：轮播和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网站复制并粘贴代码时，它正常工作，但是当我将其转换为组件时，效果不佳。

有什么想法吗？

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

0 个答案: