Как это починить Бутстрап 4 табы + swiper?

Question

[Anonimmus]

сайт здесь
Также прошу обратить внимание на мини ролик
https://shareit.video/f11mKvG7uJs16Hyl4wZa
Здесь я хотел показать - при обновлении страницы слайдер не работает, после вызова режима разработчика слайдер ))) становится на место...
вопрос - на страничке есть бутстраповские табы, во вкладке " Ход строительства " неважно какой слайдер туда вставлять результатом получается то что слайдеры там ломаются((( Может разметка? Или активные классы перебиваются? Консоль молчит,
Метод бутстрапа здесь

<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>

Comments

[Rustam Bainazarov]

Ну, если совсем быстро и топорно, то вот так:

$(document).on('shown.bs.tab', function (e) {
    $(window).trigger('resize');
})

Swiper слушает событие ресайза окна. Инициализация в скрытом блоке, безусловно, будет неверной, поэтому нужно форсировать либо ресайз, чтобы Swiper пересчитал размеры, либо вызвать метод обновления через API самого Swiper. Первый вариант проще. Всё это привязываем к событию показа таба Bootstrap.

[Anonimmus]

Хочу выделить ваш ответ верным, но он оставлен в комментарии((( напишите внизу как ответ, + в репу и карму))))

[Rustam Bainazarov]

Anonimmus, да ничего страшного, главное, что в итоге проблема решилась.

Answer 1

[Anonimmus]

Рустам Байназаров,
Спасибо, заработало лишь через api
updateOnWindowResize: true,
observer: true,
observeParents: true,

Comments

[Rustam Bainazarov]

Ох, у меня как раз почему-то встроенный observer в паре последних случаев совершенно не работал, поэтому приходилось либо быстрый фикс, как я описал в комментарии, либо через метод update().

[malayamarisha]

Спасибо за рабочее решение.
Аналогичная проблема, что не перелистывались слайды при обновлении страницы, а после вызова режима разработчика swiper работает.
Помогло:
updateOnWindowResize: true,
observer: true,
observeParents: true, // на всякий случай также добавлен