老师没有效果
来源:2-1 swiper垂直滚动基本示例
木子小可爱
2019-10-23 10:08:38
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<meta charset='utf-8'>
<title>document</title>
<link rel='stylesheet' type='text/css' href='css/idangerous.swiper2.7.6.css'>
<style>
*{margin:0;
padding:0;}
.swiper-container{
width:100%;
height:100%;
}
.swiper-wrapper{
width:100%;
height:100%;
}
.swiper-slider{
width:100%;
height:100%;
}
body html{
width:100%;
height:100%;
}
img{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slider'>
<img src='http://climg.mukewang.com/59f2f3c60001e51206000600.jpg'>
</div>
<div class='swiper-slider'>
<img src='http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg'>
</div>
<div class='swiper-slider'>
<img src='http://climg.mukewang.com/59f2f3fb0001725305000707.jpg'>
</div>
</div>
</div>
<script type='text/javascript' src='js/idangerous.swiper2.7.6.min.js'></script>
<script type='text/javascript' src='js/index.js'></script>
</body>
</html>
var mySwiper = new Swiper('.swiper-container',{
speed:500,
autoplay:2000,
loop:true})
1回答
好帮手慕糖
2019-10-23
同学你好,1、body html这样写的话,表示body下的html元素,没有这样的结构哦。
我们这里是要同时设置body与html,两个选择器之间应该使用逗号分隔,例:
2、包裹图片的盒子,类名应该是swiper-slide哦,多了一个r哦。这个是规定好的,需要使用swiper-slide
希望能帮助到你,欢迎采纳。
祝学习愉快!
相似问题