Carousel

<Bs::Carousel id="carouselExampleCaptions" class="slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button
      type="button"
      data-bs-target="#carouselExampleCaptions"
      data-bs-slide-to="0"
      class="active"
      aria-current="true"
      aria-label="Slide 1"
    ></button>
    <button
      type="button"
      data-bs-target="#carouselExampleCaptions"
      data-bs-slide-to="1"
      aria-label="Slide 2"
    ></button>
    <button
      type="button"
      data-bs-target="#carouselExampleCaptions"
      data-bs-slide-to="2"
      aria-label="Slide 3"
    ></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg
        class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
        width="800"
        height="400"
        xmlns="http://www.w3.org/2000/svg"
        role="img"
        aria-label="Placeholder: First slide"
        preserveAspectRatio="xMidYMid slice"
        focusable="false"
      ><title>Placeholder</title><rect
          width="100%"
          height="100%"
          fill="#777"
        ></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <svg
        class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
        width="800"
        height="400"
        xmlns="http://www.w3.org/2000/svg"
        role="img"
        aria-label="Placeholder: First slide"
        preserveAspectRatio="xMidYMid slice"
        focusable="false"
      ><title>Placeholder</title><rect
          width="100%"
          height="100%"
          fill="#777"
        ></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <svg
        class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
        width="800"
        height="400"
        xmlns="http://www.w3.org/2000/svg"
        role="img"
        aria-label="Placeholder: First slide"
        preserveAspectRatio="xMidYMid slice"
        focusable="false"
      ><title>Placeholder</title><rect
          width="100%"
          height="100%"
          fill="#777"
        ></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button
    class="carousel-control-prev"
    type="button"
    data-bs-target="#carouselExampleCaptions"
    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="#carouselExampleCaptions"
    data-bs-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</Bs::Carousel>