A weird bug occurs when I try to use b-carousel component with a source code from official docs. Looks like previous image turning grey during transition to the next one:
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>Your JSFiddle is importing https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css in the resources.
This is going to import Bootstrap version 5.0.0-beta3.
Which is as issue as BootstrapVue only supports Bootstrap 4.3.1 to 4.5.3 (4.5.3 being the recommended version).
So if you instead import https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css, it should work as intended.