Swiper History Navigation(历史导航) - 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。

history信息

类型:
object/boolean
举例:
true
启用版本:
4.0.0

效果演示

此例中slide切换时URL和历史记录变化,并可使用浏览器的前进和后退按钮控制swiper切换。如果你想要通过刷新浏览器URL控制slide变化则还需要服务器的URL指向支持。
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

使用方法示例

从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>