Bootstrap 4 Carousel Problem

Trying to resolve why all carousel items are displaying at once.

by deathstalkersid

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="128" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="182"></li>

    <li data-target="#myCarousel" data-slide-to="201"></li>

    <li data-target="#myCarousel" data-slide-to="202"></li>

    <li data-target="#myCarousel" data-slide-to="203"></li>

    <li data-target="#myCarousel" data-slide-to="205"></li>

  </ol>

  <div class="carousel-inner">

    <div class="carousel-item slide128 active">

      <div class="container-fluid">
        <div class="carousel-caption text-left">
          <h1>What is The Vault Arts Centre?</h1>
          <p>Unoccupied and boarded up since 2017, Scottish charity Trad Music Trust developed this former bank premises into one of the region&#x27;s most exciting new live music and performing arts venues.</p>
          <p><a href="about_the_vault_arts_centre.php" class="btn btn-outline-light" role="button">About</a></p>
        </div>
      </div>
    </div>


    <div class="carousel-item slide182">

      <div class="container-fluid">
        <div class="carousel-caption text-left">
          <h1>Venue Hire</h1>
          <p>The Vault Arts Centre is perfectly located in the heart of Newton Stewart, has modern facilities including bar and staff and is fully wheelchair accessible.</p>
          <p><a href="venue_hire_newton_stewart.php" class="btn btn-outline-light" role="button">Options & Pricing</a></p>
        </div>
      </div>
    </div>


    <div class="carousel-item slide201">

      <div...

CSS

/* Carousel base class */
.carousel {
  margin-bottom: 0;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  /* display: block; */
  height: 300px;
}

.carousel-control-prev,
.carousel-control-next {
  background: transparent;
  border: 0;
  width: 5%;
}

.slide128 {
  background: url(https://www.thevaultartscentre.co.uk/img/768/DSCF0923banner.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: scroll;
}

.slide182 {
  background: url(https://www.thevaultartscentre.co.uk/img/768/DSCF1038banner.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: scroll;
}

.slide201 {
  background: url(https://www.thevaultartscentre.co.uk/img/768/IMG_0380banner.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: scroll;
}

.slide202 {
  background: url(https://www.thevaultartscentre.co.uk/img/768/RebelRockPhotography10.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: scroll;
}

.slide203 {
  background: url(https://www.thevaultartscentre.co.uk/img/768/LordsofRuinBanner.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: scroll;
}

.slide205 {
  background: url(https://www.thevaultartscentre.co.uk/img/768/Promo-5banner.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
 ...