URL Hash Navigation

By adding splide-extension-url-hash to Splide, a slider can correspond with URL hash change. The initial slide will be determined the hash value. Also the slider moves by browser forward/back button.

Demo

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

new Splide( '#splide', {
	perPage    : 3,
	perMove    : 1,
	height     : '9rem',
	focus      : 'center',
	trimSpace  : false,
	breakpoints: {
		600: {
			perPage: 2,
			height : '6rem',
		}
	}
} ).mount( { URLHash } );

Try to move the slider and watch the URL hash change. Also, refresh the browser and verify the initial slider number, or click browser forward/back button and verify that moves the slider.

Installation

NPM(Recommended)

Get the latest extension by NPM:

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

Mount the extension to the Splide:

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

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

CDN or Hosting Files

Visit jsDelivr and get the link of the latest file or download the file from the dist drectory. Then import the minified JavaScript file on your site:

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-url-hash@0.1.0/dist/js/splide-extension-url-hash.min.js">

Note that version numbers above are incorrect. Please use the latest version.

After including files, mount the extension to the Splide:

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

Inserting Data Attribute

Set hash values to slides by data-splide-hash data 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>

Links