Use text links or buttons to control Divi sliders
By default, the slides in the Divi slider module can be controlled using the left and right navigation arrows or the circle buttons/slide indicators at the bottom of the slider. These can be toggled on or off in the module settings. If you would like extra controls that sit outside the module itself you can follow this tutorial.
To set it up so we can control the slides we just need to have some text links in a text module, some jQuery in a code module and a normal Divi slider module. The Divi builder layout in the demo looks like this;

Step 1 – Set up the text links
Add a text module, add your link text and then give each link (it can be left as #) its own CSS ID as in the code below;
[php]
<div class="activelinks">
<a id="DTE-slide-1" href="#">Divi Slider control #1</a><br>
<a id="DTE-slide-2" href="#">Divi Slider control #2</a><br>
<a id="DTE-slide-3" href="#">Divi Slider control #3</a><br>
<a id="DTE-slide-4" href="#">Divi Slider control #4</a>
</div>
[/php]
Step 2 – Add jQuery in a code module
Next, we need to add some code that tells the browser that when our text link is clicked, it should also click the associated slider control. Add a code module with the following in;
[php]
<script>
jQuery(document).ready(function( $ ) {
var selector = ‘.activelinks a’;
$(selector).on(‘click’, function(){
$(selector).removeClass(‘active’);
$(this).addClass(‘active’);
});
$("#DTE-slide-1").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(1)").trigger("click");
});
$("#DTE-slide-2").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(2)").trigger("click");
});
$("#DTE-slide-3").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(3)").trigger("click");
});
$("#DTE-slide-4").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
});
});
</script>
[/php]
Note – The code above is for a slider with 4 slides. If your slider has more/less slides you will need to edit the jQuery code. You will see 4 sections of code with 1,2,3,4 referenced in each. Each of these are for a slide.
If you have 3 slides, remove the last section of code;
[php]
$("#DTE-slide-4").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
});
[/php]
If you have 5 slides, add the following;
[php]
$("#DTE-slide-5").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(5)").trigger("click");
});
[/php]
Step 3 – Add CSS for active link
Add the following into your Divi Theme options > Custom CSS box or child theme stylesheet;
[php]
.active {
color: #333333;
}
[/php]
Step 4 – Add your slider
Add a slider and slides just as you normally would. The only thing to note is that you will need to leave the “show controls” setting turned on, or the code and links will not work. You can, however, re-style them as transparent if you like. Apart from this, you can style the slider any way you like.
thanks, I was looking for that. Is it possible also to put the active link in a different color? For instance if the divi slider is displaying the slider #2 we would have the link ‘Divi Slider Control #2’ changing to color yellow…
Step 3 – Add CSS for active link
Add the following into your Divi Theme options > Custom CSS box or child theme stylesheet;
1
2
3
.active {
color: #333333;
}
Hello,
this is great thing you propose.
I am currently trying to do the same thing but I would like to do it at a module level.
The example is you have 4 blurb modules, and when you click on it, the slider moves to the corresponding one.
Would you know how to do this ?
you could just replicate the blurb content/style in the slides. or there are a few tutorials out there to use a “divi module within another module”
Can this be done with a video slider? I tried inserting the jquery into a code module, but it just displays the text.
not tested but i would assume so
Hi Craig
Thanks for this tutorial. I’m using the Divi Slider Module. I’m trying to use the built in “button” feature in each slider to navigate to the next slide in sequence. Do you know how I can achieve that?
i dont think you can assign the id to the slider button in the settings, but id assume you could with some jquery. not sure exactly how tho unfortunately
Hi, thank you for this! I used it to connect Divi Tabs module and Divi Slider module. But I have the hardest time to do it the other way around – click on the slider control and trigger click on a specific tab.
I cannot get the jQuery function to triggered, can’t even get a simple console.log. But if I try it on any other module, it works. Have you tried to achieve something like this?
not tried this way yet, sorry. did you get it working yet?
Hello Craig!
Cool function, but jquery does not run in code module (only appears in text). Do you have a solution to teach us?
post updated… you need to wrap the code in in the code module
The J Query code does not work and makes my slider unusable even after i delete the code module. Any ideas why?
still works on the demo (above) using the same code, so i would double check what you added to your site. clear caches after any changes too.
Thanks Craig! Works like a charm. Now i have another dilemma! I need to be able to use this with multiple sections/rows. 1st section works perfect but sections two and three do not work. Basically, is it possible to have more than one slider with their respective controllers on a single page? I’m also going to implement this on multiple pages and may have more than three sections in the future. Thanks so much!
_______________________
[Controls 1] [Slider 1]
_______________________
[Controls 2] Slider 2]
_______________________
[Controls 3] [Slider 3]
_______________________
I figured this out as well, thanks again Craig!
Hi @josephseiz or Craig; can you please share how you achieved using this on several sliders on the same page, please?
Hi Craig! Thank you so much for this tutorial, it was exactly what we needed! The code isn’t working for me and I have no idea why. I am trying to replace the text links with the Divi blurb modules, and having no luck. Tried to include some text links as tests and still no cigar. Any chance you could help us out? Thanks again.
hey, the code formatting on the post was messed up, but should work now.
Hi! Thank you so much for the quick reply. Still not working… I thought maybe I was using the wrong jQuery library but even after linking the same ones you’re using it’s not working. I really appreciate your help. Here’s the site: https://perlemedia.com/selectivepay/. Not getting any console errors, just nothing happens on click. Also, it seems to deactivate the slider functions once the new links are clicked?
you can download this JSON which i just exported from the demo @ https://www.divithemeexamples.com/wp-content/uploads/2019/07/External-slider-controls.zip
Hi, how do you make it work on blurbs? I need help.
Hi Craig,
Thanks so much this is exactly what we were looking for. Is there an ability to change the text links link for the active state
Hey, yes, I have updated the code so that the active link is #333. this works by adding the class for the color on click so this wouldn’t work if the slider is set to auto slide.
Hello,
Is het possible to control the slider from another page? i mean on page A you click on text link (Divi Slider control #4) to navigate to page B that contains the slider, with associated slide is active, in this example slide number #4
hey, not tested this, but it may work. gove it a try and let us know! thanks
I tried to do this (link to a specific slide from a different page) and it doesn’t work.
Thanks, Craig! Works great on the same page. How would the link on a different page have to look like, if you want to use it for a specific slider? These don´t work:
https://_EXAMPLE-URL.COM_/_OTHER-PAGE_#DTE-slide-3
Slide 3
Hi Craig,
Great workaround! Now the color of the active slider changes on click. I was wondering if it possible to make the link for the first slider look active when without clicking? When someone clicks another link it should change like it does now. I would like to achieve to to make it more clear for the user that the the first slider is the first clickable option.
Best Regards,
Ward
not sure how to do that, but would think you could add code to say on load, click 1st link.
I have not been able to get the active link to change color. I have triple checked all the code. Any thought as to how I may solve this. Everything else works as it should.
can drop a link here so someone can take a look. otherwise hard to tell…
Oh yeah sorry about that, https://newlook.reynoldshotel.com/image-gallery/
is your link text set to white in the module? if the text white setting is taken off, then the links show green, with current link as red.
Awesome thank you! I am embarrassed I did not think of that. I appreciate your help!
Thank you, Graig for this tutorial.
What is you have multiple sliders on a single page? Would it be possible?
Regards,
Melle
you could just make a new class
Thanks for this tutorial. AlanWould it be possible to control the slides using buttons rather than text links?
i used images for the buttons on this slider. https://www.divilayouts.com/divi-testimonial-slider-layout-free-download/ or you can style a text link to look like a button using css
Thanks. I have downloaded your json, but it wont work :-/ When I click to button it jumps to first page section and nothing happens.
Hi! I did everything in the tutorial. It worked perfectly fine until today. I don’t know what’s up with it, but whenever I click on the text, I get the “#” showing up in the search bar and the slider doesn’t change at all.
Any suggestions as to what I should do?
Thank you!
should be able to just duplicate and rename all instances of activelinks to activelinks2
I am having the same issue, I am not certain how to make this work. I have used this code before on another site and it worked great, however I am now stuck with the # as well in the search bar.
I think also might be because of a theme update. I changed my database back, in cpanel, to a previous backup, before the latest divi update. It worked right after.
Maybe you can try.
Be sure to make a back-up of your latest site version before doing what I just told you.
Good luck!
Did anyone find a fix for this? Rolling back to a previous version of the theme is not an option for me.
Interestingly, I have a set of 4 buttons both inside and outside of my slider. The ones outside of the slider (like the ones in this tutorial) DON’T work, and just add a # to the URL and take me to the top of the page. But the identical links inside the slider DO work… but only ONCE. After the first time, they cause the same # problem.
Thanks for this tutorial, Craig! Unfortunately I have the same issue as described by Dan C: clicking one time on the link it works but after another click you land at the top of the page with the # at the end of the url. In my case it’s the post slider and the links are part of the posts itself (for styling reasons) but i also tried to put them below and above the slider modul that is on the page itself…always issues. When i try the demo here on this site it seems to have a similar problem.… Read more »
How can I do these on another page? Like page A (contains the link) to page B (contains slider)?
Craig,
is it possible to trigger the slide with the click on one accordion?
anything usually possible, but not something i know how to do. would mean hacking the link on the accordion
This is just what I was looking for! Thank you so much!
Because I don’t know Jquery, I’m not sure exactly how to make another class so I can trigger multiple sliders on the same page.
Would you be able to paste the jquery code for another slider to work on the same page so I can see what needs to change?
Thank you in advance!
How can I change the code so that I can show 3 sliders and when I click 2 the slide in the middle gets the link I clicked and the other two changes to the information in slide 1 and 3, for example.
If I were to control the slider with the options of a dropdown select form. How could I do it?
add the links to the dropdown items text.
Hello, could you please – if possible – show me how to place external control links for the slider module on another page. Thank you in advance. I can see that another one made the same request some time ago.
not sure this is possible the way it is set up. would be interested to see if anyone else can get this to work too.
Hi Craig – thanks for this, it’s almost what I’m looking for. Do you know of a way (presumably with jQuery) that I can trigger the next slide of one slider when the next arrow of another slider is clicked? Basically, I have two overlapping sliders that I want triggering at the same time using the nav arrows of Slider #1. Thanks!
Hello, can you link externally to a specific slide? For example, on page load, show slide 3?
not with this method
Hi there i am struggling to get this working with 5 slides.
Was working fine previously with 4 and i followed the steps to add the 5th slide.
Any help on this would be great.
Thanks,
Angus!
5 would be
Hey Craig!
Thanks for this! It really helped me.
Do you know how I would go about doing the same thing with external arrow buttons?
The dot controls work great for calling specific slides, but I would like to do the same for the previous and next buttons.
Thanks again for your help.
Hey – just find the arrow class and trigger a click on it.
$(“#DTE-slide-1”).on(“click”, function(e) {
e.preventDefault();
$(“.et-pb-arrow-next”).trigger(“click”);
});
Is it possible to enable keyboard navigation in divi slider module ?
not seen that done or something i could do, but anything is possible with a bit of code.
Thanks for this!! how about in a situation like this?
instead of an arrow navigation inside the slider. I want to have a custom button to act as a navigation..
likely easier to just re-style the built-in buttons to make like this image
I found a solution that seems to work for controlling a slide from another page. First I gave the row containing the slider a unique ID (my-slider). Then I added the following to a Code module on the page with the slider: $(document).ready(function() { if (window.location.hash){ var hash = window.location.hash.substring(1); if (hash == “slide2”){ toSlide2(); } else if (hash == “slide3”){ toSlide3(); } else {} } }); function toSlide2(){ $(‘html, body’).animate({scrollTop: $(‘#my-slider’).offset().top -110}, ‘slow’); setTimeout(function() { $(“.et-pb-controllers a:nth-child(2)”).trigger(‘click’); },10); } function toSlide3(){ $(‘html, body’).animate({scrollTop: $(‘#my-slider’).offset().top -110}, ‘slow’); setTimeout(function() { $(“.et-pb-controllers a:nth-child(3)”).trigger(‘click’); },10); } In the links that point to the… Read more »
nice solution. thanks for posting 🙂
Thanks! Do you know how control divi slider with select field (from a contact form)? Example: If I select option-2 from select field from form, then show the slide-2 from divi slider… Is possible?
not sure but i asked chatgpt and it suggested code using jquery … not tested but worth a try!