Bootstrap 4 Carousel Indicators are not appearing

Question

I'm trying to create a carousel slider with carousel indicators at the bottom using Bootstrap-4.1.3. The problem is that the carousel indicators are invisible, but they do work when you click them.

I've already tried z-index, and background colors on the indicators, but they don't seem to work.

Here is my code:

.carousel-indicators {
  z-index: 3;
  #slide-buttons {
    background-color: #999 !important;
    background-color: rgba(70, 70, 70, .25) !important;
  }
  .active {
    background-color: #444 !important;
  }
}

<div class="carousel slide col-9 mx-auto pt-5 position-relative" data-ride="carousel" id="slides">

  <!--Carousel Content-->
  <div class="carousel-content carousel-inner" role="listbox">
    <div class="slide-1 col-12 carousel-item active" id="slide1">
      <h5>Example</h5>
    </div>

    <div class="slide-2 col-12 carousel-item" id="slide2">
      <h5>Example</h5>
    </div>

    <div class="slide-3 col-12 carousel-item" id="slide3">
      <h5>Example</h5>
    </div>
  </div>

  <!-- Carousel Indicators -->
  <ul class="carousel-indicators mt-5 pt-5 ">
    <li data-target="#slides" id="slides-buttons" data-slide-to="0" class="active"></li>
    <li data-target="#slides" id="slides-buttons" data-slide-to="1" class=" "></li>
    <li data-target="#slides" id="slides-buttons" data-slide-to="2" class=" "></li>
  </ul>
</div>

Try [this](https://www.w3schools.com/code/tryit.asp?filename=FZMS3ZDRUGHW) example which includes your code too. — Ishaan, Jan 28 '19 at 16:47
Based on Cristiano Soares solution, I have also added some further suggestions, to make sure that the main carousel component wrapper has indicators set to active; ``
Further styling, as still couldn't see the indicators; CSS **`.carousel-indicators li { background-color: red; height: 3px; width: 20px; z-index: 5 !important; margin: 0 5px; cursor: pointer; } .carousel-indicators li.active { background-color: blue; height: 5px; width: 20px; z-index: 5 !important; padding: 0 5px; cursor: pointer; }`** — Rishi Bhachu, Jul 15 '21 at 19:21

Cristiano Soares · Accepted Answer · 2019-01-29T15:28:26.443

1

You should not use the same id multiple times on your page. Try using this solution instead:

.carousel .carousel-indicators li {
  background-color: red;
}

.carousel .carousel-indicators li.active {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<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 class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

edited Jan 29 '19 at 15:28

answered Jan 28 '19 at 16:05

Cristiano Soares

619
1
9
20

Thanks for the good advice about the multiple ids, but the problem still persists – Luc Nguyen Jan 28 '19 at 19:01
I'm sorry, but I don't understand what you mean. The slide indicators are being shown as you can see by running the code snippet on my post. Do you have any other specific problem on making the carousel to work? – Cristiano Soares Jan 28 '19 at 19:21
for some reason mine are invisible even though it works on your part, I ran your code on my editor and the indicators were invisible – Luc Nguyen Jan 28 '19 at 20:38
I'd recommend you to check the container where the ul is inside. It's possible that the display style of this element is hiding the carousel. Another possibility would be the Bootstrap and jQuery files. Did you check if they're being loaded correctly? – Cristiano Soares Jan 29 '19 at 09:50
I don't think that the imports are wrong, I've checked them and they seem to be loaded correctly. I've also experimented with some of the attributes of the container that holds the ul but it doesn't seem to change the appearance of the ul – Luc Nguyen Jan 29 '19 at 13:45
@LucNguyen, I've just updated the solution using the code provided by the Bootstrap documentation. I changed the color of the indicators to red and blue just as an example. Can you try to apply this in your project? – Cristiano Soares Jan 29 '19 at 15:30
Strangely the code that you have provided still seems to have the problem, I have no idea why the indicators are continuing to not appear on the screen, though they are still clickable – Luc Nguyen Jan 30 '19 at 01:59
@LucNguyen, are any error messages being logged to the browser console? The problem may be a result of a conflict with jQuery or other JavaScript libraries in your project. – Cristiano Soares Jan 30 '19 at 09:51
There aren't any javascript or jQuery errors in the console but there is an: Uncaught SyntaxError: Unexpected token export for my Popper import. Could that be the problem? – Luc Nguyen Jan 30 '19 at 13:07
@LucNguyen, I can't tell you it's the cause of the problem, but I'd recommend you to try to solve this issue or isolate the script that is prompting the message so you can be sure if it's causing the Bootstrap problem or not. – Cristiano Soares Jan 30 '19 at 13:13
I've fixed the error, but it didn't change the appearance of the indicators – Luc Nguyen Jan 31 '19 at 13:39
I just fixed the whole problem, I think I was overriding some of the CSS attributes of the bootstrap 'carousel' class and causing the indicators to disappear. When I changed the name of the CSS selector class the indicators appeared on the screen. – Luc Nguyen Jan 31 '19 at 13:44

score 0 · Answer 2 · answered Jan 28 '19 at 15:08

0

There is a typepo error in your code css id. 'slides-buttons' and '#slide-buttons

answered Jan 28 '19 at 15:08

Sahil Singh

1
1
1

Thanks for showing me the typo, but the carousel indicators are still not appearing – Luc Nguyen Jan 28 '19 at 15:13

score 0 · Answer 3 · answered Jul 15 '21 at 19:31

Based on Cristiano Soares solution, I have also added some further suggestions.

To ensure that the main carousel component wrapper has indicators set to active;

<Carousel indicators={true} .... <Item><ProjectImg><Caption> ... >

I also added further styling, as I still couldn't see the indicators once they where enabled;

.carousel-indicators li {
  background-color: red;
  height: 5px;
  width: 20px;
  z-index: 5 !important;
  margin: 0 5px;
  cursor: pointer;
}
.carousel-indicators li.active {
  background-color: blue;
  height: 5px;
  width: 20px;
  z-index: 5 !important;
  padding: 0 5px;
  cursor: pointer;
}

score 0 · Answer 4 · answered Jan 29 '22 at 09:30

0

I had the same problem with bootstrap 4. Then i figured display of indicators is none. so this fixed my problem:

.carousel-indicators{
display: block !important;}

answered Jan 29 '22 at 09:30

Elahe Eli

5
3

Bootstrap 4 Carousel Indicators are not appearing

4 Answers4