Swiper系列之轮播图

---

1、引入 CSS 文件

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

2、引入 js 文件

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

3、页面布局

<!-- Swiper -->
<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>

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"
	}
});

---

后记

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