作为组件导入时，Bootstrap Vue Carousel不起作用

Question

我正在尝试实现一个简单的轮播，并且已经安装了Bootstrap和BootstrapVue：

npm i bootstrap jquery popper.js
npm install bootstrap-vue

然后我进入了一个组件，在其中我希望该旋转木马完成并完成此操作：

<template>
    <div class="portfolio-lower">
      <BCarousel
        id="carousel-1"
        v-model="slide"
        :interval="4000"
        controls
        indicators
        background="#ababab"
        img-width="1024"
        img-height="480"
        style="text-shadow: 1px 1px 2px #333"
        @sliding-start="onSlideStart"
        @sliding-end="onSlideEnd"
      >
        <BCarouselSlide
          caption="First slide"
          text="Nulla vitae elit libero, a pharetra augue mollis interdum."
          img-src="@/assets/images/image1.jpg"
        ></BCarouselSlide>
        <BCarouselSlide
          caption="Second slide"
          text="Nulla vitae elit libero, a pharetra augue mollis interdum."
          img-src="@/assets/images/image2.jpg"
        ></BCarouselSlide>
      </BCarousel>
    </div>
  </section>
</template>

<script>
import { BCarousel } from "bootstrap-vue";
import { BCarouselSlide } from "bootstrap-vue";

export default {
  name: "portfolio",
  data() {
    return {};
  },
  components: { BCarousel, BCarouselSlide },
};
</script>

这是结果：

我哪里出错了？