Bootstrap 5 - Carousel Multiple Indicators (Buttons + Links) - html

Question

I have a problem with the Carousel (Bootstrap 5). The standard indicators work. I also have linked above the carousel. The link to the carousel's items works. Unfortunately, changing the class="active" does not work. I also tried various jQuery functions on this page.
The class active only works if you click on the next one but not the previous one. Then the active class just moves on to the next one and not back.
Code Snippet:
var myCarousel = $("#singles");
var myNav = myCarousel.prev();
myNav.find(".li > a").click(function() {
var newIndex = $(this).parent().index();
myCarousel.carousel(newIndex);
});
myCarousel.on("slide.bs.carousel", function() {
var newIndex = $(this).find(".carousel-inner>.active").index();
var newLI = myNav.children().eq(newIndex);
if (!newLI.hasClass("active")) {
myNav.find("li.active").removeClass("active");
newLI.addClass("active");
}
});
$(document).ready(function() {
$("#singles").on("slide.bs.carousel", function() {
$holder = $(".carousel-indicators-title .active");
$holder.next("a").addClass("active");
if ($holder.is(":last-child")) {
$holder.removeClass("active");
$(".carousel-indicators-title a:first").addClass("active");
}
$holder.removeClass("active");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!--SINGLES START-->
<section class="section-singles">
<div class="container">
<div class="singles">
<div class="singles-headline">
<h1>SINGLES</h1>
</div>
<div id="singles" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators-title">
<div class="links-singles">
<div class="links-singles-list">
Auf gehts, ab gehts
Atmen
</div>
</div>
</div>
<div class="carousel-indicators">
<button type="button" data-bs-target="#singles" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Auf gehts, ab gehts"></button>
<button type="button" data-bs-target="#singles" data-bs-slide-to="1" aria-label="Atmen"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="release-single-image">
<img src="/assets/images/singles/2022_12_Auf_gehts_ab_gehts.png" alt="Auf gehts, ab gehts - dan3er">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="release-single-description">
<div class="release-single-description-releasedate">
<p class="releasedate-date">VÖ: 21.12.2022</p>
<p class="releasedate-single-description"><span class="single-title-description">Auf gehts, ab gehts</span></p>
<p class="releasedate-single-description">(prod. by TrapNinjaBoy)</p>
<div class="row button-padding">
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-left">
<a href="https://open.spotify.com/track/07BQNOiMSeSHkOncnI0rQy?si=59b1fddb5a2c4e28" target="_blank">
<div class="button_buy">
<p><i class="fab fa-spotify"></i> Spotify</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-right">
<a href="https://music.amazon.de/albums/B0BQ7RLCJ2?marketplaceId=A1PA6795UKMFR9&musicTerritory=DE&ref=dm_sh_2IPLe71BZH1W7DZsXV9XoBAoA&trackAsin=B0BQ7P6D1S" target="_blank">
<div class="button_buy">
<p><i class="fab fa-amazon"></i> Amazon</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-left">
<a href="https://www.youtube.com/watch?v=UVJDV-8gz9s" target="_blank">
<div class="button_buy">
<p><i class="fab fa-youtube"></i> YouTube</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-right">
<a href="https://music.apple.com/us/album/auf-gehts-ab-gehts/1660091129?i=1660091130" target="_blank">
<div class="button_buy">
<p><i class="fab fa-apple"></i> Apple Music</p>
</div>
</a>
</div>
</div>
<div class="release-vorschau">
<div class="buttons">
<a href="#" target="_blank">
<div class="vorschau">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/07BQNOiMSeSHkOncnI0rQy?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="release-single-image">
<img src="/assets/images/singles/2022_11_Atmen.png" alt="Atmen - dan3er">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="release-single-description">
<div class="release-single-description-releasedate">
<p class="releasedate-date">VÖ: 15.11.2022</p>
<p class="releasedate-single-description"><span class="single-title-description">Atmen</span></p>
<p class="releasedate-single-description">(prod. by 7Ventus)</p>
<div class="row button-padding">
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-left">
<a href="https://open.spotify.com/track/7EILfdyUR56gLXvGznN5Dj?si=93a63262f54947c7" target="_blank">
<div class="button_buy">
<p><i class="fab fa-spotify"></i> Spotify</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-right">
<a href="https://music.amazon.de/albums/B0BM9QS96K?marketplaceId=A1PA6795UKMFR9&musicTerritory=DE&ref=dm_sh_pXrsR018TIJcTlBuIiGhTN4z8&trackAsin=B0BM9N44B9" target="_blank">
<div class="button_buy">
<p><i class="fab fa-amazon"></i> Amazon</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-left">
<a href="https://www.youtube.com/watch?v=SZERRNXNeGs" target="_blank">
<div class="button_buy">
<p><i class="fab fa-youtube"></i> YouTube</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="buttons button-right">
<a href="https://music.apple.com/us/album/atmen-radio-edit-single/1654253315" target="_blank">
<div class="button_buy">
<p><i class="fab fa-apple"></i> Apple Music</p>
</div>
</a>
</div>
</div>
<div class="release-vorschau">
<div class="buttons">
<a href="#" target="_blank">
<div class="vorschau">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/7EILfdyUR56gLXvGznN5Dj?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--SINGLES END-->