Bootstrap CSS class .carousel-item

    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://via.placeholder.com/800x450" class="d-block w-100 bg-secondary" style="height:250px;" alt="photo 1">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/800x450" class="d-block w-100 bg-secondary" style="height:250px;" alt="photo 2">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/800x450" class="d-block w-100 bg-secondary" style="height:250px;" alt="photo 3">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/800x450" class="d-block w-100 bg-secondary" style="height:250px;" alt="photo 4">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/800x450" class="d-block w-100 bg-secondary" style="height:250px;" alt="photo 5">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </a>
    </div>