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

淡淡的烟草味﹌ 2021-11-09 09:38 405阅读 0赞

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

效果：

![1383473-20190609145528433-338650442.png][]

方法二：利用card的card-img-overlay 制作背景图片

1 
     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

转载于:https://www.cnblogs.com/wm218/p/10993526.html

[1383473-20190609145528433-338650442.png]: /images/20211109/9557fca30f654e53b8d1da994779d30e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

相关 WebStorm--插件--常用插件

原文网址：[WebStorm--插件--常用插件\_IT利刃出鞘的博客-CSDN博客][WebStorm--_--_IT_-CSDN] vue+Element 其他网址

ゝ一纸荒年。/ 2022年12月15日 14:04/ 0 赞/ 718 阅读

相关 vscode 插件-常用插件

VSCode常用插件(安装步骤同汉化) 1、Auto Close Tag (自动闭合HTML/XML标签) ![在这里插入图片描述][watermark_type_Zm

你的名字/ 2022年12月05日 00:41/ 0 赞/ 557 阅读

相关学习笔记——swiper插件实现滑动导航栏并自适应

> 在做水平或垂直方向导航栏时，有时导航栏中导航项非常多，显示在同一行或列显得十分拥挤，并且文本可能会换行。而将导航栏显示成两行或者两列又十分难看。这时我们可以将导航栏的部分内

Myth丶恋晨/ 2022年11月05日 10:58/ 0 赞/ 463 阅读

相关使用swiper4轮播插件

[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_download_index.h

蔚落/ 2022年09月02日 05:15/ 0 赞/ 296 阅读

相关常用插件

1. Eclipse Explorer 4.1.0 单击一个java或其他文件, 可以使用快捷键 Ctrl + ~ 打开其所在的系统目录 2. Subversive - S

心已赠人/ 2022年07月15日 10:53/ 0 赞/ 373 阅读

相关 CodeMirror插件的高度自适应问题

项目中需要使用代码编辑器插件，于是找到了CodeMirror，这个插件功能十分强大，官网地址： > [https://codemirror.net/][https_codem

待我称王封你为后i/ 2022年07月13日 14:18/ 0 赞/ 326 阅读

相关常用Maven插件介绍（下）

转自：[http://www.infoq.com/cn/news/2011/05/xxb-maven-8-plugin][http_www.infoq.com_cn_news_

淩亂°似流年/ 2022年04月01日 09:57/ 0 赞/ 359 阅读

相关 vue 插件(swiper)使用

两种方法: 1... 打开[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_d

本是古典何须时尚/ 2021年11月22日 14:52/ 0 赞/ 440 阅读

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

【常用】swiper插件下使用container元素，使其自适应代码如下，已做兼容处理： 1 <div class="swiper-container home-

淡淡的烟草味﹌/ 2021年11月09日 09:38/ 0 赞/ 406 阅读

相关 swiper 插件使用

Swiper使用方法 1.首先加载插件，需要用到的文件有[swiper.min.js][]和[swiper.min.css][]文件。 <!DOCTYP

素颜马尾好姑娘i/ 2021年09月10日 16:32/ 0 赞/ 612 阅读