How to fix Bootstrap 4 tabs + swiper?

Question

css

site here
Also please pay attention to the mini video
https://shareit.video/f11mKvG7uJs16Hyl4wZa
Here I wanted to show - when the page is updated, the slider does not work, after calling the developer mode, the slider ))) falls into place ...
question - there are bootstrap ones on the page tabs, in the "Progress of construction" tab, it doesn’t matter which slider to insert there, the result is that the sliders break there (((Maybe markup? Or active classes are interrupted? The console is silent,
The bootstrap method is here

<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
    <div class="container">
        <div class="row">
            <div class="col-12">
               <!-- Swiper -->
               <div class="swiper-container">
                <div class="swiper-wrapper">
                    <?php $sertification = get_field('sertificats',93) ?>
                    <?php foreach($sertification as $sertif) { ?>
                        <div class="swiper-slide">
                            <div class="show_big"></div>
                            <img class="fz__minimized" src="<? print_r($sertif) ?>">
                        </div>    
                    <?php } ?>
                </div>
                <a href="#0" class="swiper-button-next arrow arrowRight ant-carousel-arrow-right" role="button"></a>
                <a href="#0" class="swiper-button-prev arrow arrowLeft ant-carousel-arrow-left " role="button"> </a>
            </div>
        </div>
        <!-- Swiper JS -->

        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4, 
                spaceBetween: 20,
                loop: true,
                autoplay: {
                    delay: 4000,
                    speed: 1000,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    300: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    600: {
                        slidesPerView: 3,
                        spaceBetween: 40,
                    },
                    1024: {
                        slidesPerView: 4,
                        spaceBetween: 20,
                    },
                }
            });
        </script>
    </div>
</div>

Answer 1

Rustam Baynazarov ,
Thanks, it worked only through api
updateOnWindowResize: true,
observer: true,
observeParents: true,