Control Divi slider with external links

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.

The finished Slider controls demo result