bootstrap 5 carousel doesn't work in Blazor

Question

please open the below link to see the carousel that is working with the help of jquery and bootstrap 4.3.1 (code lines 48,50). Instead of these, I wanted to use Bootstrap 5 js files to get the same carousel. But it doesn't with code lines (8), 52-54 (bootstrap 5 CSS and JS will make a gap between the images sliding in the carousel, which is not a requirement. Firstly, with Bootstrap 5 CSS and JS in blazor, the images won't slide by themself or when clicked on Next/prev buttons, so need to click on carousel-indicators to see the slide function)

Bootstrap 5 is at least sliding in JS Editor but with white gaps while sliding even here: [JS Fiddle][https://jsfiddle.net/gxyuqoer/]

Bootstrap 5 is not working in Blazor editor: Blazor Fiddle

Kindly let me understand what is the difference between the bootstrap 4.3.1 and 5 version's carousel and why its not possible to get the carousel sliding in version 5

Answer 1

You can use the HxCarousel component from HAVIT Blazor ( https://havit.blazor.eu ) bundle.

Free, built on top of Bootstrap 5.

If you are not willing to use the bundle, you can clone the source code ( https://github.com/havit/Havit.Blazor ), it is open-source.

Answer 2

You need to add this javascript in your HTML:

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