URL Hash Navigation - Splide Extension
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.
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 links of the latest files or download files from the dist library.
- Import minified stylesheet and JavaScript files on your site:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-url-hash@0.0.2/dist/css/splide-extension-url-hash.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-url-hash@0.0.2/dist/js/splide-extension-url-hash.min.js">
Note that version numbers above are incorrect. - Mount the extension to the Splide.
new Splide( '#splide' ).mount( window.splide.Extensions );
HTML
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>
License
Splide is released under the MIT license.
© 2020 Naotoshi Fujita