老师没有效果

来源: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,两个选择器之间应该使用逗号分隔,例:

http://img.mukewang.com/climg/5dafbf2009fea8c503100289.jpg

2、包裹图片的盒子,类名应该是swiper-slide哦,多了一个r哦。这个是规定好的,需要使用swiper-slide

http://img.mukewang.com/climg/5dafbf70097ce72306670400.jpg

希望能帮助到你,欢迎采纳。

祝学习愉快!

0

0 学习 · 6815 问题

查看课程