Inserting Carousel in html/css

Question

Pls how do I do carousel with play/pause , indicators and previous/next arrows below the carousel just like in microsoft.com

Ive tried something like this but isnt working

      <div class="carousel-item active">
          <img src="Microsoft1.webp" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
          <img src="Microsoft2.jpg" class="d-block w-100" alt="...">
      </div>
  </div>
  <ol class="carousel-indicators">
      <li data-bs-target="#carouselExampleSlidesOnly" data-bs-slide-to="" class="active"></li>
      <li data-bs-target="#carouselExampleSlidesOnly" data-bs-slide-to=""></li>
      <!-- Add more <li> elements for additional slides -->
  </ol>