1

I have set up a carousel to show 5 videos. I have set up indicators at the bottom to navigate:

<div class="col-lg-12 carousel slide" id="trailers" data-bs-ride="carousel" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="1" data-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="2" aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="3" aria-label="Slide 4"></button>
      <button type="button" data-bs-target="#trailers" data-bs-slide-to="4" aria-label="Slide 5"></button>
    </div>
    <div class="trailerSlider carousel-inner" style="background-color: #000; padding-bottom: 50px;"> <!-- was livetv -->
      <div class="carousel-item active" >
        <div id="cover">
          Loading video...
        </div>
      </div>
      <div class="carousel-item">
        <div id="cover2">
          Loading video...
        </div>
      </div>
      <div class="carousel-item">
        <div id="cover3">
          Loading video...
        </div>
      </div>
      <div class="carousel-item">
        <div id="cover4">
          Loading video...
        </div>
      </div>
      <div class="carousel-item">
        <div id="cover5">
          Loading video...
        </div>
      </div>
    </div>
    
  </div>

However, even though the indicators show correctly, they don't work, nothing happens when I tap, not even an error message.

If I change data-bs-ride, data-bs-target and data-bs-slide-to to data-ride, data-target and data-slide-to (as I saw in a video tutorial), the buttons do work but the buttons look weird (much smaller and with a white border).

Also, how can I have the slider work only via the indicator buttons and not slide automatically?

cesarcarlos
  • 1,271
  • 1
  • 13
  • 33

1 Answers1

1

You have a duplicate data-bs-ride="carousel" and an extra data-slide-to="1" but I when I ran your code, those errors wouldn’t stop the carousel from working. You didn’t include a working snippet with your question, so it’s not possible to verify which version of Bootstrap 5 you’re using.

Here’s a working snippet using your code.

.carousel-item {
    height: 10.5rem;
}
#cover, #cover2, #cover3, #cover4, #cover5 {
    color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="col-lg-12 carousel slide" id="trailers" data-bs-ride="carousel" data-bs-interval="false">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="3" aria-label="Slide 4"></button>
        <button type="button" data-bs-target="#trailers" data-bs-slide-to="4" aria-label="Slide 5"></button>
    </div>
    <div class="trailerSlider carousel-inner" style="background-color: #000; padding-bottom: 50px;">
        <!-- was livetv -->
        <div class="carousel-item active">
            <div id="cover">
                Loading video 1...
            </div>
        </div>
        <div class="carousel-item">
            <div id="cover2">
                Loading video 2...
            </div>
        </div>
        <div class="carousel-item">
            <div id="cover3">
                Loading video 3...
            </div>
        </div>
        <div class="carousel-item">
            <div id="cover4">
                Loading video 4...
            </div>
        </div>
        <div class="carousel-item">
            <div id="cover5">
                Loading video 5...
            </div>
        </div>
    </div>

</div>

To prevent the slider from working automatically, add data-bs-interval="false" to the carousel div.

Rich DeBourke
  • 2,873
  • 2
  • 15
  • 17