本文实例讲述了jQuery自适应轮播图插件Swiper用法。分享给大家供大家参考,具体如下:
运行效果截图如下:
示例代码如下:
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
新建H5自适应模板
html,body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-Box;
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
-webkit-Box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-Box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}