【常用】swiper插件下使用container元素，使其自適應
代碼如下，已做兼容處理：
1 <div class="swiper-container home-fullBanner"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide d-flex justify-content-center bg-primary" > 4 <div class="container h-100 row bg-success"> 5 這是一屏 6 </div> 7 </div> 8 9 <div class="swiper-slide d-flex justify-content-center bg-primary" > 10 <div class="container h-100 row bg-success"> 11 這是一屏 12 </div> 13 </div> 14 15 </div> 16 </div>
效果：
方法二：利用card的card-img-overlay 制作背景圖片
1 <!-- banner --> 2 <section class="swiper-container container-fluid top-banner"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide card h-100 border-0"> 5 <img src="images/test/banner2.jpg" class="card-img-bottom"> 6 <div class="container card-img-overlay">1111</div> 7 </div> 8 <div class="swiper-slide card h-100 border-0"> 9 <img src="images/banner-2.jpg" class="card-img-bottom"> 10 <div class="container card-img-overlay">1111</div> 11 </div> 12 13 </div> 14 <div class="swiper-pagination"></div> 15 <div class="swiper-button-prev hidden-xs"></div> 16 <div class="swiper-button-next hidden-xs"></div> 17 </section>
card有邊框，所以這里要加上 border-0