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>