A Bootstrap 5 Lightbox example using only default included classes and components—no other JavaScript necessary.

bootstrap5-lightbox.html

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="row">
                <a href="#" class="col-sm-4" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
                    <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="0" src="https://unsplash.it/200.jpg?image=250" class="img-fluid">
                </a>
                <a href="#" class="col-sm-4" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
                    <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="1" src="https://unsplash.it/200.jpg?image=251" class="img-fluid">
                </a>
                <a href="#" class="col-sm-4" data-bs-toggle="modal" data-bs-target="#exampleLightbox">
                    <img data-bs-target="#lightboxExampleCarousel" data-bs-slide-to="2" src="https://unsplash.it/200.jpg?image=252" class="img-fluid">
                </a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleLightbox" tabindex="-1" aria-labelledby="exampleLightboxLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleLightboxLabel">Lightbox Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="lightboxExampleCarousel" class="carousel slide">
                    <div class="carousel-inner ratio ratio-16x9 bg-dark">
                        <div class="carousel-item text-center active">
                            <img src="https://unsplash.it/1600/900.jpg?image=250" class="img-fluid mh-100">
                        </div>
                        <div class="carousel-item text-center">
                            <img src="https://unsplash.it/1600/1200.jpg?image=251" class="img-fluid mh-100">
                        </div>
                        <div class="carousel-item text-center">
                            <img src="https://unsplash.it/1200/1000.jpg?image=252" class="img-fluid mh-100">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#lightboxExampleCarousel" 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="#lightboxExampleCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Working demo here: https://codepen.io/trvswgnr/pen/MWrPwWx