# Redirect from one page to a specific slide (using SplideJS URL Hash Navigation) in another page

**URL:** <https://forum.bricksbuilder.io/t/redirect-from-one-page-to-a-specific-slide-using-splidejs-url-hash-navigation-in-another-page/15482>\
**Category:** How To\
**Created:** [September 18, 2023, 4:40pm UTC](https://forum.bricksbuilder.io/t/redirect-from-one-page-to-a-specific-slide-using-splidejs-url-hash-navigation-in-another-page/15482 "2023-09-18T16:40:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![QuentinW](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/q/bc8723/32.png) [@QuentinW](https://forum.bricksbuilder.io/u/QuentinW)\
**Post date:** [September 18, 2023, 4:40pm UTC](https://forum.bricksbuilder.io/t/redirect-from-one-page-to-a-specific-slide-using-splidejs-url-hash-navigation-in-another-page/15482/1 "2023-09-18T16:40:51Z")

</div>

After a lot of failures, i managed to mount the SplideJS extension to in existing Slider element.

The code below is placed in a code element in the same page as the slider element.  
Don’t forget to replace ‘SliderID’ with the ‘data-script-id’ value of your own slider.

It seems that the timout is mandatory, it’s not working anymore if i remove it.

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

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  setTimeout(() => {
    const instance = window.bricksData?.splideInstances['sliderID'] || false
    instance.destroy(true);
    instance.mount(window.splide.Extensions);
  }, 250)
})
</script>

```

**ISSUE :**

Now, i can see the url hash changing when i swipe the slides on my test page.

Currently, i have generated 3 hash links :

mywebsiteurl/home/ **#01**  
mywebsiteurl/home/ **#02**  
mywebsiteurl/home/ **#03**

My goal is to add a custom redirect link to images in a gallery (page A) so when i click on it, it redirects the user so the corresponding slide (with the hash nav url) in the slider (page B).

Is this supposed to work this way or do i need to tweak the script in some ways so it could allow the redirection from another page ?

Greetings,

---

<div class="post-metadata">

**Author:** ![QuentinW](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/q/bc8723/32.png) [@QuentinW](https://forum.bricksbuilder.io/u/QuentinW)\
**Post date:** [September 21, 2023, 11:21am UTC](https://forum.bricksbuilder.io/t/redirect-from-one-page-to-a-specific-slide-using-splidejs-url-hash-navigation-in-another-page/15482/2 "2023-09-21T11:21:17Z")

</div>

**SOLUTION :**

I changed the custom hash from 0x to a string (blabla-my-photo-text) and now it’s working fine ! I will test again with the initial structure to double check if it’s really a bug or if i failed somehting but anyway, now it’s working fine !

So, if you want to use the slider element with url nash nav, this is one way to achieve it 🙂

**STEP BY STEP TUTO :**

**1 - Use a Slider (Nestable) Element**

![image](https://forum.bricksbuilder.io/uploads/default/original/2X/7/700aa569e698c00817d3a8c8f5a2bd1b70464b92.png)

**2 - Mount SplideJS extension**

Settings \> Page Settings \> Custom Code \> Body (Header) Scripts

Put this code :

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

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  setTimeout(() => {
    const instance = window.bricksData?.splideInstances['xntjaq'] || false
    instance.destroy(true);
    instance.mount(window.splide.Extensions);
  }, 10)
})
</script>

```

Don’t forget to modify **splideInstances[‘xxxx’]** with your own **data-script-id** value

![image](https://forum.bricksbuilder.io/uploads/default/original/2X/b/b9a35b73d6a95085e9a0bb4b4604e3c0ec4f89d6.png)

**3 - Add custom attributes**

Add custom attributes to each Slide of the Slider element

 ![image](https://forum.bricksbuilder.io/uploads/default/original/2X/1/188f06f2e032b9174f505ce0b781e7405ece5d48.png)

**4 - It’s done**

Now you can use links to redirect from another page to a specific slide of your nestable slider element !