日本語

URL Hash Navigation

You're browsing the documentation for v3

Overview

The URL Hash extension makes the slider correspond with the URL hash. It parses the hash and determines the start index. Also, it updates the hash every time when the slider moves. Try moving the slider below, and check the URL change:

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09

Installation

NPM

Get the latest version by NPM:

$ npm install @splidejs/splide-extension-url-hash

Mount the extension to Splide:

import { Splide } from '@splidejs/splide';
import { URLHash } from '@splidejs/splide-extension-url-hash';


new Splide( '.splide' ).mount( { URLHash } );
JavaScript

CDN or Hosting Files

Visit jsDelivr and get the link of the latest file or download the file from the dist directory. And then, import the minified script on your site:

<script src="path-to-the-script/splide-extension-url-hash.min.js"></script>
HTML

After that, mount the extension to Splide:

new Splide( '#splide' ).mount( window.splide.Extensions );
JavaScript

Usage

Set the hash value to each slide by the data-splide-hash attribute:

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide" data-splide-hash="slide01"></li>
      <li class="splide__slide" data-splide-hash="slide02"></li>
      <li class="splide__slide" data-splide-hash="slide03"></li>
    </ul>
  </div>
</div>
HTML