<div class="container-fluid mt-4">
  <div id="carouselSidebar" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselSidebar" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselSidebar" data-bs-slide-to="1" aria-label="Slide 2"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://pixelprowess.com/i/pow_angle.webp" class="d-block w-100" alt="Image Description">
        <div class="d-block">
          <a href="#" class="h5 d-block mt-2 text-decoration-none">Slide 01</a>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni magnam perferendis, similique saepe quas pariatur deleniti ratione dolorum, consequatur ea incidunt, quo corporis suscipit culpa atque ipsum possimus exercitationem commodi!</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://pixelprowess.com/i/spoon.webp" class="d-block w-100" alt="POW Logo">
        <div class="d-block">
          <a href="#" class="h5 d-block mt-2 text-decoration-none">Slide 02</a>
          <p>Alias, repudiandae illum maiores vitae dolores, soluta quasi commodi quas, ex dolorum impedit enim reprehenderit doloremque quos earum at saepe temporibus vero voluptatibus hic accusamus eos. Quis odio ex voluptate!</p>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselSidebar" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselSidebar" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam consequuntur eos voluptatum quis commodi ex accusamus consectetur dolores dicta quaerat sunt inventore voluptatem, rerum, aperiam ad. Ullam explicabo itaque nesciunt!</p>
  <p>Dicta alias, autem eum, rem quas nesciunt minima repellendus dolorem deleniti sed quibusdam eaque deserunt. Libero, animi! Eligendi error officia magni esse soluta. Nemo deserunt reprehenderit natus sed labore eius.</p>
  <p>Sit quos nulla corporis molestiae, quia deleniti excepturi porro labore quidem minima vero, repudiandae, nemo eius atque iure esse. Quam in veritatis provident voluptatibus eveniet voluptas expedita voluptatum eos. Cum?</p>
  <p>Quasi, aspernatur. Tempora labore ullam quibusdam! Culpa atque quasi architecto ea velit, nemo sequi nisi ipsa numquam quae fuga neque in, error exercitationem odio modi voluptate cum! Cupiditate, quae dolor.</p>
  <p>Quibusdam eaque architecto beatae eos. Natus maiores maxime nulla, dolores laudantium saepe repudiandae vitae sapiente illum in necessitatibus dolorem numquam minus eligendi veniam? Fuga quisquam accusantium consequuntur. Est, delectus ipsum!</p>
</div>
#carouselSidebar {
  display: inline-block;
  float: right;
  width:400px;
}

#carouselSidebar .carousel-item img {
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  height:210px;
}
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js