bootstrap 5 旋转木马在 Blazor 中不起作用

Question

请打开以下链接以查看在 jquery 和引导程序 4.3.1（代码行 48,50）的帮助下工作的轮播。 而不是这些，我想使用 Bootstrap 5 js 文件来获得相同的轮播。 但是它没有代码行（8），52-54（bootstrap 5 CSS 和 JS 会在轮播中滑动的图像之间产生间隙，这不是必需的。首先，使用 Bootstrap 5 CSS 和 blazor 中的 JS，图片不会自己滑动，也不会在点击 Next/prev 按钮时滑动，所以需要点击 carousel-indicators 才能看到滑动功能）

Bootstrap 5 至少在 JS 编辑器中滑动，但即使在这里滑动时也有白色间隙： [JS Fiddle][https://jsfiddle.net/gxyuqoer/]

Bootstrap 5 在 Blazor 编辑器中不起作用： Blazor Fiddle

请让我了解 bootstrap 4.3.1 和 5 版本的轮播有什么区别，以及为什么在版本 5 中轮播无法滑动

Answer 1

您可以使用 HAVIT Blazor ( https://havit.blazor.eu ) 捆绑包中的HxCarousel组件。

免费，建立在 Bootstrap 5 之上。

如果你不愿意使用这个包，你可以克隆源代码（ https://github.com/havit/Havit.Blazor ），它是开源的。

Answer 2

您需要在您的 HTML 中添加此 javascript：

<script type="text/javascript">
    var myCarousel = document.querySelector('#IndexCarousel');
    var carousel = new bootstrap.Carousel(myCarousel);
</script>