Swiper в модальном окне

Я запускаю слайдер 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>

Когда мой дисплей меньше 576 пикселей, фотографии автоматически имеют ширину 0. Это безумие. Даже не знаю, где найти эту беду ... Помогите кто-нибудь, пожалуйста. Может у кого-то была такая же проблема


person ruslan_krivoshein    schedule 21.09.2017    source источник
comment
Можете ли вы также опубликовать соответствующий HTML-код?   -  person justDan    schedule 21.09.2017
comment
Как сказал @DanielD, опубликуйте соответствующий HTML. Не размещайте просто ссылку и инструкции, где искать.   -  person pucky124    schedule 21.09.2017
comment
Извините, я исправляю свой вопрос   -  person ruslan_krivoshein    schedule 21.09.2017


Ответы (1)


Возникла проблема с блоком "контейнер". Не знаю, как насчет критической точки bootstrap и swiper, но исключение помогло мне

person ruslan_krivoshein    schedule 22.09.2017