swiper3d
/
index.html

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>旋转木马</title>
	<link rel="stylesheet" href="./build/css/3dSwiper.css">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			overflow: hidden;
		}

		ul {
			list-style: none;
		}
		@media screen and (max-width: 768px){
			.swiper-navigator {display: none;}
		}
	</style>
</head>

<body>
	<div class="swiper-container ">
		<ul class="swiper-wrap">
			<li>
				<img src="./images/3dSwiper/3dBanner1.png">
			</li>
			<li>
				<img src="./images/3dSwiper/3dBanner2.png">
			</li>
			<li>
				<img src="./images/3dSwiper/3dBanner3.png">
			</li>
			<li>
				<img src="./images/3dSwiper/3dBanner4.png">
			</li>
			<li>
				<img src="./images/3dSwiper/3dBanner5.png">
			</li>
			<li>
				<img src="./images/3dSwiper/3dBanner6.png">
			</li>
		</ul>
		<ul class="swiper-dots"></ul>
		<ul class="swiper-navigator">
			<li class="swiper-btn-prev">&lt;</li>
			<li class="swiper-btn-next">&gt;</li>
		</ul>
	</div>

	<script src="./build/js/3dSwiper.js"></script>
	<script>
		new Swiper(".swiper-container",{
			pagination: ".swiper-dots",
			navigator: {
				prev: ".swiper-btn-prev",
				next: ".swiper-btn-next"
			},
			delay: 2000,
			autoPlay: true
		});
	</script>

	<body>

</html>