<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微活动</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" minimal-ui /> <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script> <link rel="stylesheet" href="../css/swiper.min.css"> <script src="../js/swiper.min.js"></script> <script src="../js/small.js"></script> <link rel="stylesheet" href="../css/test.css"> <script src="../js/app.js"></script> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="content-slide1">1</div> </div> <div class="swiper-slide"> <div class="content-slide2">2</div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-scrollbar"></div> </div> </body> </html>
css代码如下:
.content-slide1{ width:640px; height:1008px; background: url("../images/bj-1.jpg") no-repeat 0 0; background-size:640px 1008px; } .content-slide2{ width:640px; height:1008px; background: url("../images/bj-2.jpg") no-repeat 0 0; background-size:640px 1008px; }
最后效果如图
我给content-slide1设置了height108px;它自己给父层的swiper-slide设置了行内样式height:2046px这是为什么?
swiper.js里面封装的函数是怎么设置高度的?原理是什么?
根据最外层的container高度决定的,即.swiper-container。当然有参数可以设置是否自动高度和固定高度,2.x和3.x的设置方法不一样,可以参考官方API
一周热门 更多>