SwiperJS outside the Bootstrap container

Place the following CSS in the project:

.swiper-overflow-container {
    overflow-x: hidden;

    .container {
        overflow: visible;
    }

    .swiper-container {
        overflow: visible;
    }
}

The HTML could be like:

<div class="swiper-overflow-container">
    <div class="container">
        <div class="swiper-container">
            <!-- Required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">
                    <div class="item">
                        <p>First slide</p>
                    </div>
                </div>
                
                <div class="swiper-slide">
                    <div class="item">
                        <p>Second slide</p>
                    </div>
                </div>

                ...
            </div>
        </div>
    </div>
</div>