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>