0

我正在尝试将 swiper.js 集成到显示背景图像的 angularJs 网络应用程序中。该库正在运行，但图像未正确显示。请查看这个与我的应用程序完全一样工作的 plunker。

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

1 回答 1

0

您需要设置 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 演示

于 2019-12-22T19:36:44.580 回答