Question

我在模态窗口中初始化Swiper滑块。

var swiper = new Swiper('.swiper', {
            loop: true,
            autoplay: 3000,
            speed: 1500,
            prevButton: '.prev',
            nextButton: '.next',
            observer: true,
            observeParents: true,
            slidesPerView: 3,
            spaceBetween: 30,
            breakpoints: {
                640: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                }
            }
        });

相关HTML：

<a data-toggle="modal" data-target="#certificates__modal">
    <div class="blue-button">
        <span class="text">
            modal
        </span>
    </div>
</a>

<section id="certificates__modal" class="certificates__modal modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="container">
                <div class="certificates__swiper swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="background-image" style="background: url('img/certificates/01.jpg') 50% no-repeat;"></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="background-image" style="background: url('img/certificates/02.jpg') 50% no-repeat;"></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="background-image" style="background: url('img/certificates/03.jpg') 50% no-repeat;"></div>
                        </div>
                    </div>
                </div>
                <div class="prev-slide-button"></div>
                <div class="next-slide-button"></div>
            </div>
        </div>
    </div>
</section>

当我的显示器小于equaly 576px时，照片会自动显示宽度为0.我对此感到很疯狂。我甚至不知道，在哪里发现这个麻烦......请帮助别人。也许有人有同样的问题

Answer 1

＆＃34;容器＆＃34;出现了问题。块。我不知道，关于bootstrap和swiper的关键点怎么样，但排除帮助我

模态窗口中的Swiper

1 个答案: