I wander how to have a Bootstrap 5 carousel dynamic. I mean how to dynamically display indicators and add active class to first item of carousel.

In Bootstrap 4 is like that:

$('#main_carousel .carousel-item:first').addClass('active');
var myCarousel = $("#main_carousel");
myCarousel.append("<ol class='carousel-indicators d-none d-xl-flex'></ol>");
var indicators = $("#main_carousel .carousel-indicators");
myCarousel.find(".carousel-inner").children(".carousel-item").each(function(index) {
  (index === 0) ?
  indicators.append("<li data-target='#main_carousel' data-slide-to='"+index+"' class='active'></li>") :
  indicators.append("<li data-target='#main_carousel' data-slide-to='"+index+"'></li>");
});

How to do that in vanilla js for bootstrap 5?

thank you