carousel.html

<div class="col-lg-10 col-lg-offset-1 centered">
    <div id="carousel-generic" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            {% for img in page.carousel.first %}
                <div class="carousel-item active">
                    <img src="{{ "/assets/img/project/carousel/" | prepend: site.baseurl }}{{ img }}" alt="" class="d-block w-100">
                </div>
            {% endfor %}
            {% for img in page.carousel offset:1 %}
                <div class="carousel-item">
                    <img src="{{ "/assets/img/project/carousel/" | prepend: site.baseurl }}{{ img }}" alt="" class="d-block w-100">
                </div>
            {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-generic" 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="#carousel-generic" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>