日本語

URL Hash Navigation

Overview

The URL Hash extension makes the carousel correspond with the URL hash. It parses the hash and determines the start index. Also, it updates the hash every time when the carousel moves. Try moving the carousel 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