Bootstrap vue 轮播组件故障

Question

当我尝试将 b-carousel 组件与来自官方文档的源代码一起使用时，出现了一个奇怪的错误。看起来上一张图片在过渡到下一张图片时变灰了：

new Vue({
  el: '#app'
})

<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/tether@2.0.0/dist/css/tether.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@2.6.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/tether@2.0.0/dist/js/tether.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-carousel id="carousel-1" :interval="4000" controls indicators background="#ababab" img-width="1024" img-height="480" style="text-shadow: 1px 1px 2px #333;">
    <!-- Text slides with image -->
    <b-carousel-slide caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img-src="https://picsum.photos/1024/480/?image=52"></b-carousel-slide>

    <!-- Slides with custom text -->
    <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
      <h1>Hello world!</h1>
    </b-carousel-slide>

    <!-- Slides with image only -->
    <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

    <!-- Slides with img slot -->
    <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
    <b-carousel-slide>
      <template #img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="image slot"
          >
        </template>
    </b-carousel-slide>

    <!-- Slide with blank fluid image to maintain slide aspect ratio -->
    <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
      </p>
    </b-carousel-slide>
  </b-carousel>
</div>

Answer 1

您的 JSFiddle 正在资源中导入 https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css。这将导入 Bootstrap 版本 5.0.0-beta3。

这是个问题，因为 BootstrapVue 仅支持 Bootstrap 4.3.1 到 4.5.3（4.5.3 是推荐版本）。

因此，如果您改为导入 https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css，它应该会按预期工作。

https://jsfiddle.net/23ozwgnp/

Bootstrap vue 轮播组件故障

Bootstrap vue carousel component glitch

vue.js

bootstrap-vue