Hello, I'm using LayerSlider 7 in combination with WordPress and the Enfold theme. I have multiple sliders on the same page, including one (layerslider_5_1d1tscsqk5lzn) that contains several slides. I'd like to programmatically navigate to a specific slide inside this slider when a user clicks a link or an image in another slider (layer_slider_1). I’ve already tried the following approaches:
Using deeplinks like data-ls="deeplink:slide-4;" and updating the hash
But none of these have worked so far. The slider is present in the DOM, but JavaScript methods like goToSlide() don’t seem to have any effect, or the API appears uninitialized when I call them. I suspect that LayerSlider might be loading asynchronously (possibly due to Enfold or Avia framework), so I tried using a setInterval to wait for the initialization — still no success. Could you please advise:
The best way to target a specific slide from an external element (e.g., a button or image)
Whether there's a recommended way to access the correct slider instance when IDs are randomized (like layerslider_5_xxx)
If there's a reliable event I can hook into to detect when the slider is fully initialized
Thank you in advance for your help! Let me know if you need access to a staging site or more technical details.
Please, make sure to assign a unique class to the target slider (the one you want to control from other sliders). For example, use target-slider (without . ) as the class name (you can see this on the attached screenshot as well).
Next, open the other slider and select the layer you want to use to trigger the slide change on the target slider when clicked. In the right sidebar, go to Layers → Attributes, and create a custom attribute with the following values:
Key: onclick
Value: jQuery('.target-slider').layerSlider(2)
where .target-slider is the class name you previously set, and the number inside the parentheses refers to the slide number of the target slider you want to switch to.
I’ve checked your website, and it’s working correctly on my end. The only issue I noticed is related to the iframe on the target slider’s 4th slide — but the slide change itself works fine.
If you’d like to ensure a more reliable behavior, I recommend using the following code in the onclick attribute:
Please note: if you are using static layers on previous slides in the target slider, they won’t be visible when jumping directly from slide 1 to slide 4, since slides 2 and 3 are skipped.
I’m glad to hear the slide change is working correctly now — thanks for the update! To add a smooth scroll to the target slider before the slide changes, here’s what you can do:
Add a Layer Action to the layer you’re clicking (you’ll find this in the right sidebar: Layers → Actions).
Choose the “Scroll to Element” action.
In the Selector field, enter the class name of the target slider (including the dot), e.g.:
.target-slider
Then, modify that same layer’s onclick attribute to the following:
This way, you don’t need the previously added .layerSlider('start') call, since scrolling the page will bring the target slider into the viewport automatically. The setTimeout delays the slide change just enough for the scroll animation to finish.
Let us know if you need help with the selector or anything else!
Hello,
I'm using LayerSlider 7 in combination with WordPress and the Enfold theme.
I have multiple sliders on the same page, including one (layerslider_5_1d1tscsqk5lzn) that contains several slides.
I'd like to programmatically navigate to a specific slide inside this slider when a user clicks a link or an image in another slider (layer_slider_1).
I’ve already tried the following approaches:
But none of these have worked so far.
The slider is present in the DOM, but JavaScript methods like goToSlide() don’t seem to have any effect, or the API appears uninitialized when I call them.
I suspect that LayerSlider might be loading asynchronously (possibly due to Enfold or Avia framework), so I tried using a setInterval to wait for the initialization — still no success.
Could you please advise:
Thank you in advance for your help!
Let me know if you need access to a staging site or more technical details.
Best regards,
Hello Maïro,
Please, make sure to assign a unique class to the target slider (the one you want to control from other sliders). For example, use target-slider (without . ) as the class name (you can see this on the attached screenshot as well).
Next, open the other slider and select the layer you want to use to trigger the slide change on the target slider when clicked. In the right sidebar, go to Layers → Attributes, and create a custom attribute with the following values:
Key: onclick
Value: jQuery('.target-slider').layerSlider(2)
where .target-slider is the class name you previously set, and the number inside the parentheses refers to the slide number of the target slider you want to switch to.
Attached files: 1. add-custom.classname.png
2. add onclick functions.png
Best Regards,
George | Kreatura Dev Team
Hello,
Thank you for your previous answer. I just tried the method you described:
I assigned the class target-slider (without the dot) in Project Settings > Project Classes of the target slider.
In the source slider, I selected the image layer I want to use as a trigger.
I went to Layers → Attributes, and created a custom attribute with:
Key: onclick Value: jQuery('.target-slider').layerSlider(2)Unfortunately, nothing happens when I click the image.
I double-checked that the class name matches but no redirection to the slide occurs.
Thanks again for your help
Maïro
Attached files: Capture d’écran 2025-05-16 à 09.13.50.png
Capture d’écran 2025-05-16 à 09.14.07.png
Hello Maïro,
I’ve checked your website, and it’s working correctly on my end. The only issue I noticed is related to the iframe on the target slider’s 4th slide — but the slide change itself works fine.
If you’d like to ensure a more reliable behavior, I recommend using the following code in the onclick attribute:
jQuery('.target-slider').layerSlider('start');jQuery('.target-slider').layerSlider(4)
Please note: if you are using static layers on previous slides in the target slider, they won’t be visible when jumping directly from slide 1 to slide 4, since slides 2 and 3 are skipped.
Best Regards,
George | Kreatura Dev Team
Hello,
The slide change is working correctly now — thank you.
How can I also add a smooth scroll to the target slider before the slide changes?
Is there a way to do this directly in the onclick attribute?
Thanks in advance!
Maïro
Hi Maïro,
I’m glad to hear the slide change is working correctly now — thanks for the update!
To add a smooth scroll to the target slider before the slide changes, here’s what you can do:
Add a Layer Action to the layer you’re clicking (you’ll find this in the right sidebar: Layers → Actions).
Choose the “Scroll to Element” action.
In the Selector field, enter the class name of the target slider (including the dot), e.g.:
.target-slider
Then, modify that same layer’s onclick attribute to the following:
setTimeout( function(){ jQuery('.target-slider').layerSlider(4); }, 1000 )
This way, you don’t need the previously added .layerSlider('start') call, since scrolling the page will bring the target slider into the viewport automatically. The setTimeout delays the slide change just enough for the scroll animation to finish.
Let us know if you need help with the selector or anything else!
Best Regards,
George | Kreatura Dev Team