@Anonimmus

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

сайт здесь
Также прошу обратить внимание на мини ролик
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>
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
@Anonimmus Автор вопроса
Рустам Байназаров,
Спасибо, заработало лишь через api
updateOnWindowResize: true,
observer: true,
observeParents: true,
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы