javascript – Bootstrap carousel indicators not showing in custom theme


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:

<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>

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



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

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



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


//Some content


    <script src=""></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>


<?php wp_footer(); ?>


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.

Davood Kazemi 2 years 2021-03-21T16:31:53-05:00 0 Answers 0 views 0

Leave an answer