swiper使用记录js水平轮播

1.引入文件

<script type="text/javascript" src="js/swiper.min.js"></script>
<link rel="stylesheet" href="css/swiper.min.css">

2.html实现swiper-slide水平轮播

<div class="swiper-container">//外层
	<div class="swiper-wrapper">
		<div class="swiper-slide">//轮播区域div1
			<ul>
				<li>生育津贴如何领取</li>
				<li>安全员证书如何领取</li>
				<li>疫情防控</li>
			</ul>
		</div>
		<div class="swiper-slide">//轮播区域div2
			<ul>
				<li>生育津贴如何领取</li>
				<li>安全员证书如何领取</li>
				<li>疫情防控</li>
			</ul>
		</div>
	</div>
</div>

3.js点击开始水平轮播，关闭销毁swiper实例否则会累加

var mySwiper;
$(".fireBox").click(function () {
	if (show == "block") { //关闭
		mySwiper.destroy(true);//销毁实例
	} else { //打开
		mySwiper = new Swiper(".swiper-container", {
			direction: "horizontal", // 水平
			loop: true, // 循环模式选项
			autoplay: {
				disableOnInteraction: false,
				delay: 5000,//延迟时间
			},
			observer: true, //监视
			observeParents: true,//监视父盒子发生变化 ---- display:none/block
			on: { //绑定事件
				touchStart: function () { //当点击到slider时执行
					console.log(12345)
				}
			}
		});
		var swiperslides = document.querySelector('.swiper-wrapper')
		swiperslides.onmouseenter = function () { //鼠标移入停止切换
			mySwiper.autoplay.stop()
		},
			swiperslides.onmouseleave = function () { //鼠标离开开始切换
				mySwiper.autoplay.start()
			}
	}
})

注意：如果给li绑定事件建议用mySwiper里的on，或者用Jq的on绑定，如果是li的click事件滚动后不会生效

$('.swiper-wrapper').on('click', '.swiper-slide ul li', function() {
		var yhtml=$(this).html();
		console.log(yhtml);
	})