Bootstrap carousel indicators out of the main div not switching automatically

Question

I have the latest Bootstrap, and have a carousel somewhere on my page, with the indicators outside of the main carousel div.

My carousel:

<div class="background-carousel">
    <div class="carousel slide carousel-fade" id="carousel-home" data-ride="carousel1">
        <div class="carousel-inner" role="listbox" id="carousel-inner-home">
            <div data-slide-no="0" class="item carousel-item active" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/home-bg-1.png)">
            </div>
            <div data-slide-no="1" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass.jpg)">
            </div>
            <div data-slide-no="2" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass2.jpg)">
            </div>
            <div data-slide-no="3" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass3.jpg)">
            </div>
        </div>
    </div> <!-- carousel -->
</div> <!-- /.background-carousel -->

I then have my indicators else where on the page:

<div class="home-carousel-indicators">
    <ol class="carousel-indicators">
        <li data-target="#carousel-home" data-slide-to="0" class="carousel-switcher active"></li>
        <li data-target="#carousel-home" data-slide-to="1" class="carousel-switcher"></li>
        <li data-target="#carousel-home" data-slide-to="2" class="carousel-switcher"></li>
        <li data-target="#carousel-home" data-slide-to="3" class="carousel-switcher"></li>
    </ol>
</div> <!-- /.home-caraousel-indicators -->

As the carousel switches pictures, the indicators don't change. I also had to use a workaround to get them to change the carousel when clicked.

Summing it up:

• My carousel works fine.
• My carousel indicators are outside of the carousel div.
• The indicators do not automatically switch when the carousel does.
• I had to use a jQuery workaround to fix the indicators when clicking them.

Answer 1

For Bootstrap 5

#myCarousel is the ID of carousel whereas #indicators is the ID of parent div of indicators.

let myCarousel = document.querySelector('#myCarousel');
myCarousel.addEventListener('slide.bs.carousel', (event) => {
    let elementChildrens = document.querySelector("#indicators").children;
    elementChildrens.item(event.from).classList.remove("active");
    elementChildrens.item(event.to).classList.add("active");
});

HTML for Indicators:

<div id="indicators" class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

HTML for Carousel:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Answer 2

Here an even more simplified example of Guruprasad Rao answer to make the indicators work if they are outside the main carousel div. It works with every element that has the data-target property, not just li

$('.carousel').bind('slide.bs.carousel', function (e) {
    var index = $(e.relatedTarget).index();

    $('[data-target="#' + $(this).prop('id') + '"]').each(function (i) {
        if (i === index) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    });
});