---

1、引入 CSS 文件

<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
1

2、引入 js 文件

<script src="./swiper/swiper-bundle.min.js">script>
1

3、页面布局

<div class="slider swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="./img/slider1.png" alt="" />
		div>
		<div class="swiper-slide">
			<img src="./img/slider1.png" alt="" />
		div>
		<div class="swiper-slide">
			<img src="./img/slider1.png" alt="" />
		div>
		<div class="swiper-slide">
			<img src="./img/slider1.png" alt="" />
		div>
		<div class="swiper-slide">
			<img src="./img/slider1.png" alt="" />
		div>
		<div class="swiper-slide">
			<img src="./img/slider1.png" alt="" />
		div>
		<div class="swiper-slide">
			<img src="./img/slider1.png" alt="" />
		div>
		<div class="swiper-slide">
			<img src="./img/slider1.png" alt="" />
		div>
	div>
	<div class="swiper-pagination">div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4、js 逻辑编写

var swiper = new Swiper(".slider", {
	autoplay: {
		delay: 1000,
		// loop: true,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		observer: true, //开启动态检查器，监测swiper和slide
		observeParents: true //监测Swiper 的祖/父元素
	},
	pagination: {
		el: ".swiper-pagination"
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！