Indicators in Bootstrap 5 carousel not working; can't stop - carousel

Question

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?

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