AngularJS: Swiper.js не показывает фоновые изображения

Question

Я пытаюсь интегрировать swiper.js в мое веб-приложение angularJs, отображающее фоновые изображения. Библиотека работает, но изображения не отображаются должным образом. Пожалуйста, посмотрите этот плункер, который работает точно так же, как мое приложение.

http://plnkr.co/edit/ISdEZn?p=preview

Ниже наиболее релевантной части:

<!-- Slider main container -->
    <div class="swiper-container" swiper>
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <!--<div class="swiper-slide">Slide 1</div>-->
            <!--<div class="swiper-slide">Slide 2</div>-->
            <!--<div class="swiper-slide">Slide 3</div>-->

            <div class="swiper-slide" ng-repeat="boatPhoto in boatPhotos" is-loaded>                    
                    <div style="margin:auto; background-image: url('//s3-eu-west-1.amazonaws.com/yanpy.dev/img/boats/13620/l/{{boatPhoto.name}}.{{boatPhoto.mime}}')">
                    </div>
              </div>                
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>

Answer 1

Вам необходимо установить ширину и высоту div.

<div style="margin:auto;width:100%;height:100%; background-image: url('//s3-eu-west-1.amazonaws.com/yanpy.dev/img/boats/13620/l/{{boatPhoto.name}}.{{boatPhoto.mime}}')">
     Hola
</div>

Обновленная демоверсия plnkr