【常用】swiper插件下使用container元素,使其自适应

【常用】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

posted @ 2019-06-09 14:56 网申 阅读(...) 评论(...) 编辑 收藏