A carousel is a slideshow of images, text or any markup. A .carousel holds a .carousel-inner with one .carousel-item per slide (exactly one must be .active, or nothing shows), optional .carousel-indicators buttons with data-bs-slide-to, and previous/next buttons with data-bs-slide. .slide animates the change; .carousel-fade cross-fades instead.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div id="ads" class="carousel slide m-3">
<div class="carousel-indicators">
<button data-bs-target="#ads" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button data-bs-target="#ads" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner rounded" style="height: 170px">
<div class="carousel-item active h-100 bg-primary">
<div class="carousel-caption"><h5>Learn Bootstrap</h5>Components in minutes.</div>
</div>
<div class="carousel-item h-100 bg-success" data-bs-interval="8000">
<div class="carousel-caption"><h5>Build faster</h5>Less custom CSS.</div>
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#ads" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" data-bs-target="#ads" data-bs-slide="next">
<span class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
For photos, use <img class="d-block w-100"> slides of one aspect ratio: carousels do not normalize slide sizes. Options (data-bs-* attributes or a new bootstrap.Carousel(el, {...}) object) default to interval: 5000, pause: "hover", keyboard, touch (swipe) and wrap all true, and ride: false; data-bs-ride="carousel" autoplays on load. Methods prev(), next(), to(index), cycle() and pause() drive it from script, and the slide.bs.carousel and slid.bs.carousel events report direction, from and to.