The main issue is as the title says. The displays work fine and I can see the images properly, but the next and previous buttons as well as the carousel indicators do not work. There doesn't seem to be any error messages, and I've tried installing poppers but that didn't seem to work either. I would appreciate any help!
My code is as follows:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="title_screen" class="row fullscreen">
<div class="col-sm-7">
<iframe class="trailer" width="800" height="500" src="https://www.youtube.com/embed/p68k3U8WzRU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="story_page" class="benguiat fullscreen row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<h1>Story</h1>
<hr>
<p class="story">Invaders from another world attack without warning,
unleashing a new type of threat: weapons known as “machine lifeforms.”
In the face of this insurmountable threat, mankind is driven from Earth and takes refuge
on the Moon. </p>
<br>
<p class="story"> The Council of Humanity organizes a resistance of android soldiers in
an effort to take back their planet. To break the deadlock,
the Resistance deploys a new unit of android infantry: YoRHa. </p>
<br>
<p class="story">In the forsaken wasteland below, the war between the machines and the androids rages on.
A war that is soon to unveil the long-forgotten truth of this world...</p>
</div>
</div>
<div id="character_page" class="fullscreen benguiat row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<h1>Characters</h1>
<hr>
<div id= "character_carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#character_carousel" data-slide-to="0" class="active"></li>
<li data-target="#character_carousel" data-slide-to="1"></li>
<li data-target="#character_carousel" data-slide-to="2"></li>
<li data-target="#character_carousel" data-slide-to="3"></li>
<li data-target="#character_carousel" data-slide-to="4"></li>
<li data-target="#character_carousel" data-slide-to="5"></li>
<li data-target="#character_carousel" data-slide-to="6"></li>
<li data-target="#character_carousel" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- 2b page -->
<img class="d-block w-100" src="images/2b_carousel.png" alt="First slide">
</div>
<div class="carousel-item">
<!-- 9s page -->
<img class="d-block w-100" src="images/9s_carousel.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<!-- a2 page -->
<img class="d-block w-100" src="images/a2_carousel.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<!-- commander page -->
<img class="d-block w-100" src="images/commander_carousel.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<!-- operator page -->
<img class="d-block w-100" src="images/operator_carousel.jpg" alt="Fifth slide">
</div>
<div class="carousel-item">
<!-- pod page -->
<img class="d-block w-100" src="images/pod_carousel.jpg" alt="Sixth slide">
</div>
<div class="carousel-item">
<!-- adam and eve page -->
<img class="d-block w-100" src="images/adam_eve_carousel.jpg" alt="Seventh slide">
</div>
<div class="carousel-item">
<!-- pascal page -->
<img class="d-block w-100" src="images/pascal_carousel.jpg" alt="Eighth slide">
</div>
</div>
<a class="carousel-control-prev" href="#character_carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#character_carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>