Sto aggiornando il mio sito a bootstrap 5, ma la multi slide che in 4 funzionava bene nel 5 non va anche se ho aggiornato le librerie, o meglio va ma con dei bug. In particolare è la lightbox che non funziona sembra lavorare solo sulla slide active, ein modalità mobile resta piantato con la rotellina di caricamento. Allego il codice:

Codice HTML:
<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="generator" content="Codeply">
  <title>Codeply simple HTML/CSS/JS preview</title>
  <base target="_self"> 

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">  
  

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">

  <style>@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}

</style>
</head>
<body>
  <div class="container text-center my-3">
    <h2 class="font-weight-light">Bootstrap Multi Slide Carousel</h2>
    <div class="row mx-auto my-auto justify-content-center">
        <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
               <div class="carousel-item active">
				
				
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                              <a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox" data-gallery="example-gallery" >
	                           <img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">
                              </a>
                            </div>
                           
                        </div>
                    </div>
					
               
					
			</div>
                <div class="carousel-item ">
				
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                            <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery">
	                         <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                             </a>
                            </div>
                           
                        </div>
                    </div>
					
          
					
					</div>
               <div class="carousel-item">
				
				
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                             <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery">
	                           <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
                              </a>
                            </div>
                            
                        </div>
                    </div>
					
               
					
			</div>
			 <div class="carousel-item">
				
				
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                             <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" >
	                           <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
                              </a>
                            </div>
                            
                        </div>
                    </div>
					
               
					
			</div>
			 <div class="carousel-item">
				
				
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                               <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox"  data-gallery="example-gallery">
	                           <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
                              </a>
                            </div>
                        
                        </div>
                    </div>
					
               
					
			</div>
             
             
            </div>
            <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </div>
    </div>
    <h5 class="mt-2 fw-light">advances one slide at a time</h5>
</div>
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.7.8/dist/index.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>




  <script>
  let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
    const minPerSlide = 4
    let next = el.nextElementSibling
    for (var i=1; i<minPerSlide; i++) {
        if (!next) {
            // wrap carousel by using first child
        	next = items[0]
      	}
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})

  </script>
  <script>
    // prevent navigation
    document.addEventListener("DOMContentLoaded", function() {
      var links = document.getElementsByTagName("A");
      for(var i=0; i < links.length; i++) {
        links[i].addEventListener("click", function(e) {
          var href = this.getAttribute("href")

          if (!href) {
            return
          }

          if (href === '#') {
            // hash only ('#')
            console.debug('Internal nav allowed by Codeply');
            e.preventDefault()
          }
          else if (this.hash) {
            // hash with tag ('#foo')
            var element = null
            try {
              element = document.querySelector(this.hash)
            }
            catch(e) {
              console.debug('Codeply internal nav querySelector failed')
            }
            if (element) {
              // scroll to anchor
              e.preventDefault();
              const top = element.getBoundingClientRect().top + window.pageYOffset
              //window.scrollTo({top, behavior: 'smooth'})
              window.scrollTo(0,top)
              console.debug('Internal anchor controlled by Codeply to element:' + this.hash)
            }
            else {
              // allow javascript routing
              console.debug('Internal nav route allowed by Codeply');
            }
          }
          else if (href.indexOf("/p/")===0 || href.indexOf("/v/")===0) {
            // special multi-page routing
            console.debug('Special internal page route: ' + href)

            var l = href.replace('/p/','/v/')

            // reroute
            e.preventDefault()
            var newLoc = l + '?from=internal'
            console.debug('Internal view will reroute to ' + newLoc) 
            location.href = newLoc
          }
          else if (href.indexOf("./")===0) {
            // special multi-page routing
            console.debug('Special internal ./ route: ' + href)

            var u = parent.document.URL.split("/")
            var pn = href.split("/")[1]
            var plyId = u[u.length-1]

            if (plyId.indexOf('?from')>-1) {
              // already rerouted this
              console.debug('already rerouted')
              plyId = u[u.length-2]
            }

            var l = plyId + '/' + pn
            
            console.debug(u)
            console.debug(pn)
            console.debug('l',l)

            // reroute
            e.preventDefault()
            var newLoc = '/v/' + l + '?from=internal'
            console.debug('Internal page will reroute to ' + newLoc) 
            location.href = newLoc
          }
          else {
            // no external links
            e.preventDefault();
            console.debug('External nav prevented by Codeply');
          }
          //return false;
        })
      }
    }, null);
  </script>


</body>
</html>
La libreria del lightbox: https://trvswgnr.github.io/bs5-lightbox/

Il sito dove ho preso la slide: https://www.codeply.com/p/0CWffz76Q9