Вывод отдельно взятой картинки в баннере (bootstrap)

Я буквально не смог придумать точную формулировку для вопроса, так как буквально не понимаю механику. Прошу прощения. Есть шаблон бутстраповский. На главной странице есть так называемая "карусель", вот код (простите за возможный мусор в коде, просто выкладываю как есть, вдруг где-то в деталях проблема):

<div class="container-fluid p-0 mb-5 wow fadeIn" data-wow-delay="0.1s">
    <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="w-100" src="static/img/carousel-1.jpg" alt="Image">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <h5 class="text-light text-uppercase mb-3 animated slideInDown">Welcome to Apex</h5>
                                <h1 class="display-2 text-light mb-3 animated slideInDown">A Construction & Renovation Company</h1>
                                <ol class="breadcrumb mb-4 pb-2">
                                    <li class="breadcrumb-item fs-5 text-light">Commercial</li>
                                    <li class="breadcrumb-item fs-5 text-light">Residential</li>
                                    <li class="breadcrumb-item fs-5 text-light">Industrial</li>
                                </ol>
                                <a href="" class="btn btn-primary py-3 px-5">More Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img class="w-100" src="static/img/carousel-2.jpg" alt="Image">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-10">
                                <h5 class="text-light text-uppercase mb-3 animated slideInDown">Welcome to Apex</h5>
                                <h1 class="display-2 text-light mb-3 animated slideInDown">Professional Tiling & Painting Services</h1>
                                <ol class="breadcrumb mb-4 pb-2">
                                    <li class="breadcrumb-item fs-5 text-light">Commercial</li>
                                    <li class="breadcrumb-item fs-5 text-light">Residential</li>
                                    <li class="breadcrumb-item fs-5 text-light">Industrial</li>
                                </ol>
                                <a href="" class="btn btn-primary py-3 px-5">More Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
            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="#header-carousel"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>

Также на некоторых страницах есть баннер наверху, и картинки туда берутся именно те, что в карусели. И мне нужно на каждую эту страницу добавить свой собственный баннер. Код:

<div class="container-fluid page-header py-5 mb-5 wow fadeIn" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeIn;">
    <div class="container text-center py-5">
        <h1 class="display-4 text-white  slideInDown mb-4">3</h1>
        <nav aria-label="breadcrumb animated slideInDown">
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a class="text-white" href="/">Home</a></li>
                <li class="breadcrumb-item"><a class="text-white" href="/xidmetler">2</a></li>
                <li class="breadcrumb-item text-primary active" aria-current="page">3</li>
            </ol>
        </nav>
    </div>
</div>

Как это сделать? Может даже костылем каким-нибудь.