首先，大家都知道轮播图的效果需要用到原生js自己写，但在学习前期我们想要做出轮播图的效果又怎么办呢，这里我们就要用到swiper这一个插件，接下来我们进行介绍。
第一步：老规矩，上框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
第二步：看清楚咯，接下来我们就要开始演示啦
首先第一步：我们需要先下载一下swiper这个插件（如果有需要的，可以直接私信，这里就不教大家如果下载了），下载好后，记得要找到这两个东西，这两个东西是必不可少的哦
第三步：然后把下方代码复制到你的代码中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</body>
</html>
第四步：上面的只是一个框架布局接下来我们引入关键的css文件和js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
<script src="dist/js/swiper-bundle.min.js"></script>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</body>
</html>
这两个文件一定要引入，这是关键，别的文件引入不引入看你需要，这两个必需有
第五步：重点又来咯，仔细看，接下来我们要把官方给的js文件也复制过来
<script>
var mySwiper = new Swiper ('.swiper', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
第六步：我们现在基本上已经完成了所有的步骤，接下来添加图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
<script src="dist/js/swiper-bundle.min.js"></script>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</body>
</html>
需要几个图片轮播就加几个，记得自己根据自己需要该一下swiper的大小，图片的话设置100%即可。
本文转载自: https://blog.csdn.net/tea_tea_/article/details/125948784
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。