Swiper Hash Navigation(锚导航) - hashNavigation

设置散列导航选项,或true使用默认值。为每个slide增加散列导航(有点像锚链接)。
还需要在每个slide处增加data-hash属性。
这样当你的swiper切换时你的页面url就会加上这个属性的值了,你也可以通过进入页面时修改页面url让swiper在初始化时切换到指定的slide。 你可以直接跳转到指定的slide。比如这样:直接跳到第三个slide。 如果需要浏览器的前进后退按钮配合控制,需要加上watchState

hashNavigation信息

类型:
boolean
默认:
false
举例:
true
启用版本:
4.0.0

效果演示

切换时注意页面地址变化

slider1
slider2
slider3

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide" data-hash="slide1">
			slider1</div>
		<div class="swiper-slide" data-hash="slide2">
			slider2</div>
		<div class="swiper-slide" data-hash="slide3">
			slider3</div>
	</div>
</div>
<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
  hashNavigation: true,
})
</script>