Login With Github

Swiper API: Hash Navigation

Hash navigation is intended to have a link to specific slide that allows to load page with specific slide opened.

To make it work, you need to enable it by passing hashNavigation:true parameter and adding slides hashes in data-hash attribute:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="slide1">Slide 1</div>
        <div class="swiper-slide" data-hash="slide2">Slide 2</div>
        <div class="swiper-slide" data-hash="slide3">Slide 3</div>
        <div class="swiper-slide" data-hash="slide4">Slide 4</div>
        <div class="swiper-slide" data-hash="slide5">Slide 5</div>
var swiper = new Swiper('.swiper-container', {
  //enable hash navigation
  hashNavigation: true

Hash Navigation Parameters

Parameter Type Default Description
hashNavigation object/boolean  

Enables hash url navigation to for slides. Object with hash navigation parameters or boolean true to enable with default settings. For example:

var mySwiper = new Swiper('.swiper-container', {
  hashNavigation: {
    replaceState: true,


watchState boolean false Set to true to enable also navigation through slides (when hashnav is enabled) by browser history or by setting directly hash on document location
replaceState boolean false Works in addition to hashnav to replace current url state with the new one instead of adding it to history

0 Comment