Control Divi slider with links

Tutorial: Theme Examples

P.S.: I had to change the class "DTE-slide-1" to "et_pb_slide_0" and so on. I updated both html and jQuery code. I also removed the color from the css, because whenever the slide changed automatically, the active link would not change.

HTML

<div class="activelinks">
<a id="et_pb_slide_0" href="#">01</a><br>
<a id="et_pb_slide_1" href="#">02</a><br>
<a id="et_pb_slide_2" href="#">03</a><br>
<a id="et_pb_slide_3" href="#">04</a>
</div>

jQuery

<script>

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

var selector = '.activelinks a';
$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

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

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

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

$("#et_pb_slide_3").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
});
});
</script>

CSS

<style>
.active {
display:inline-block;
}
</style>