history
设置为true开启history导航，或者自定义history导航选项。
在slide切换时可无刷新更换URL和浏览器的history.state(pushState)。这样每个slide都会拥有一个自己的URL。
使用history还必需在slide上增加一个属性data-history，例<div class="swiper-slide" data-history="slide1"></div>
开启history会取消hashnav。
在slide切换时可无刷新更换URL和浏览器的history.state(pushState)。这样每个slide都会拥有一个自己的URL。
使用history还必需在slide上增加一个属性data-history，例<div class="swiper-slide" data-history="slide1"></div>
开启history会取消hashnav。
history信息
- 类型：
- object/boolean
- 举例：
- true
- 启用版本：
- 4.0.0
效果演示
此例中slide切换时URL和历史记录变化，并可使用浏览器的前进和后退按钮控制swiper切换。如果你想要通过刷新浏览器URL控制slide变化则还需要服务器的URL指向支持。使用方法示例
从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-history="slide1">Slide 1</div>
<div class="swiper-slide" data-history="slide2">Slide 2</div>
<div class="swiper-slide" data-history="slide3">Slide 3</div>
</div>
</div>
<script>
var swiper = new Swiper('.swiper', {
history: true,
});
</script>转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/history/317.html