English

URL Hash Navigation

URLハッシュナビゲーション

概要

URLハッシュエクステンションを使用すると、URLのハッシュとスライダーを同期させることができます。この拡張機能はページがロードされた際ハッシュを解析し、対応するスライドがある場合にはスライダーのスタートインデックスを更新します。また、スライダーが移動するたびにハッシュを更新し、ブラウザの履歴に追加します。

試しに、以下のスライダーを操作し、URLがどのように変化するかを確認してみてください。また、ハッシュが更新された後、ブラウザの「戻る」ボタンを押してみてください。

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

インストール

NPM

最新版をNPMから取得してください。

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

Splideを初期化する際、URLハッシュエクステンションをmount()メソッドに渡すと使用可能になります。

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


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

CDNまたはホスティング

jsDelivrから最新ファイルへのURLを取得するか、あるいはこのディレクトリからファイルをダウンロードし、<script>タグを用いてサイトにインポートしてください。

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

Splideを初期化する際、window.splide.Extensionsを渡せば準備完了です。

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

使用方法

data-splide-hash属性を用いて、各スライドにハッシュの値を登録してください。

<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