I want to have a Bootstrap Carousel in my homepage. The carousel is being played automatically but the indicators isn’t showing.

When I use inspect elements, I see the indicators’ tags are present in the html code, but their dimension is 0x0. When I inspect elements in the browser, I see when a slide appears, its corresponding indicator will become “active” as well. So it seems they have no problem. But the indicators are invisible on the slider.

I use the latest Bootstrap (v5.0.0-beta2).

Here’s my code in the functions.php:

 // Load in our CSS and JS
  function arghavantheme_enqueue_styles(){
    wp_enqueue_style( 'boot-css', get_stylesheet_directory_uri() . '/assets/bootstrap/css/bootstrap.min.css', [], time(), 'all' );
    wp_enqueue_style( 'boot-rtl-css', get_stylesheet_directory_uri() . '/assets/bootstrap/css/bootstrap-rtl.min.css', [], time(), 'all' );
    wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/style.css', [], time(), 'all' );

    wp_enqueue_script( 'boot-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', [ 'jquery' ], time(), true );

  }

  add_action( 'wp_enqueue_scripts', 'arghavantheme_enqueue_styles' );

Carousel’s code:

    //content-homepage.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    
<header class="entry-header">

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">

    <div class="carousel-item active">
      <img src="http://localhost/arghavan2/wp-content/uploads/2021/02/dog.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://localhost/arghavan2/wp-content/uploads/2021/02/123.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
          <img src="http://localhost/arghavan2/wp-content/uploads/2021/02/1234.jpg" class="d-block w-100" alt="...">
        </div>

      </div>

    </div>

   </header>
    
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>

I also linked JQuery and the Bootstrap javascript file at the end of the footer:

//footer.php

        </div><!--#content-->



    <footer id="footer" class="site-footer bg-secondary text-white py-5">

    

//Some content


    </footer>

    
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</div><!--#page-->

<?php wp_footer(); ?>

</body>
</html>

I tried so many different things. Like using different versions of Bootstrap, changing the dimension or z-index of the indicator, etc. But couldn’t fix it.

The indicators didn’t appeared at all.