This is an extension of the Splide slider library for listening to hash change and move a slide to a slide having the hash name.

Also, an initial slide will correspond with the URL hash.

• Demo and Document

1. Get the latest extension by NPM:

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

2. Mount the extension to the Splide.

   import Splide from '@splidejs/splide';
   import URLHash from '@splidejs/splide-extension-url-hash';
   new Splide( '#splide' ).mount( { URLHash } );

1. Visit jsDelivr and get the links of the latest files or download files from the dist library.
2. Import minified stylesheet and JavaScript files on your site:

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide-extension-url-hash.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide-extension-url-hash.min.js">

   Note that version numbers above are incorrect.
3. Mount the extension to the Splide.

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

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>

Splide is released under the MIT license.
© 2020 Naotoshi Fujita