How to make Bootstrap 5 carousel dynamic (indicators & first item active class)?

Question

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

Answer 1

If you are looking for a simple JQuery to Vanilla JS conversion, you can use this code:

document.querySelector('#main_carousel .carousel-item').classList.add('active');

let my_carousel = document.getElementById('main_carousel');
my_carousel.innerHTML += "<ol class='carousel-indicators d-none d-xl-flex'></ol>";

let indicators = document.querySelectorAll('#main_carousel .carousel-indicators');
my_carousel.querySelectorAll('.carousel-inner .carousel-item').forEach((element, index) => {
    indicators.innerHTML += index === 0 ? "<li data-target='#main_carousel' data-slide-to='" + index + "' class='active'></li>" : "<li data-target='#main_carousel' data-slide-to='" + index + "'></li>";
});