swiper全屏滚动切换

网页代码 2021-11-21 10:25:09 0

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>swiper全屏滚动切换-jq22.com</title>
	<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<style>
	@import url("https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/5.4.5/css/swiper.min.css");
	html,body {
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	}
	.swiper {
	width:100%;
	height:100%;
	--swiper-theme-color:#DB2C32;
	text-align:center;
	color:white;
	font-size:24px;
	}
	</style>
	</head>
	<body>
	<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/5.4.5/js/swiper.min.js" type="application/javascript"></script>

	<div class="swiper">
	<div class="swiper-wrapper">
	<div class="swiper-slide" style="background-color: #1B6D85;">slider1</div>
	<div class="swiper-slide" style="background-color: #122B40;">slider2</div>
	<div class="swiper-slide" style="background-color: #2B542C;">slider3</div>
	<div class="swiper-slide" style="background-color: #070B10;">slider4</div>
	</div>
	<div class="swiper-pagination"></div>
	</div>

	<script>
	var mySwiper = new Swiper('.swiper', {
	autoplay: true, //可选选项，自动滑动
	init: true,
	mousewheel: true,
	updateOnWindowResize: true,
	speed: 1200,
	noSwiping: true,
	autoHeight: true, //高度随内容变化
	observer: true,
	observeParents: true,
	// slidesPerView:'auto',
	direction: 'vertical', // 垂直切换选项
	loop: false, // 循环模式选项
	roundLengths: true, //防止文字模糊
	threshold: 30,
	pagination: {
	el: '.swiper-pagination',
	clickable: true,
	},
	})
	</script>

	</body>
	</html>