Me pregunto cómo tener una dinámica de carrusel de Bootstrap 5. Me refiero a cómo mostrar indicadores dinámicamente y agregar una clase activa al primer elemento del carrusel.

En Bootstrap 4 es así:

 $('#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>"); });

¿Cómo hacer eso en vanilla js para bootstrap 5?

gracias