Swiper.slideTo 点击定位到slide item_swiper 定位到指定位置-CSDN博客

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Swiper 锚定位</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" />
		<style>
			body,
			div {
				margin: 0;
				padding: 0;
			}

			div.swiper-button {
				margin: 10px 0;
			}

			div.swiper-container {
				width: 800px;
				height: 500px;
			}

			div.swiper-slide {
				width: 100%;
				height: 100%;
				color: #ffffff;
			}

			div.swiper-slide.slide1 {
				background-color: #16a085;
			}

			div.swiper-slide.slide2 {
				background-color: #2980b9;
			}

			div.swiper-slide.slide3 {
				background-color: #f1c40f;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container">
			<div class="swiper-button">
				<button data-hash="1">slide1</button>
				<button data-hash="2">slide2</button>
				<button data-hash="3">slide3</button>
			</div>
			<div class="swiper-wrapper">
				<div class="swiper-slide slide1">Slide 1</div>
				<div class="swiper-slide slide2">Slide 2</div>
				<div class="swiper-slide slide3">Slide 3</div>
			</div>
		</div>
		
		<a href="https://www.swiper.com.cn/api/methods/109.html" target="_blank">slideTo()</a>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
	<script>
		const mySwiper = new Swiper('.swiper-container', {});

		const buttons = document.querySelectorAll('.swiper-button button');
		for (const i of buttons) {
			i.addEventListener('click', function(e) {
				mySwiper.slideTo(i.getAttribute('data-hash') - 1);
			});
		}
	</script>
</html>