Use text links or buttons to control Divi sliders

It was recently asked in one of the Divi Facebook groups how to control content in a slider using external text links. I had been looking at a post from Fixit Press the other day that showed how to use external Divi buttons to control the Divi slider and figured this would work well to re-create the example requested (on this services page) in the question.

To set this up we just need to have some text links in a text module, some jQuery in a code module and a normal slider module. The Divi builder layout in the demo looks like this;

divi slider module link controls

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;

<a href="#" id="DTE-slide-1">Divi Slider control #1</a>
<a href="#" id="DTE-slide-2">Divi Slider control #2</a>
<a href="#" id="DTE-slide-3">Divi Slider control #3</a>
<a href="#" id="DTE-slide-4">Divi Slider control #4</a>

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;

jQuery(document).ready(function( $ ) {

$("#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");
});
});

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;

$("#DTE-slide-4").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
});

If you have 5 slides, add the following;

$("#DTE-slide-5").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(5)").trigger("click");
});

Step 3 – 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

Divi Slider module

divi slider control using links

This is a slider slide with some text content. The image is added into the Content section too.

Controlled with external text links

divi slider control using links

This is a slider slide with some text content. The image is added into the Content section too.

Using jQuery code

divi slider control using links

This is a slider slide with some text content. The image is added into the Content section too.

In a Divi code module

divi slider control using links

This is a slider slide with some text content. The image is added into the Content section too.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close