The slide controllers are styled in the following section of CSS:

/*Style the controllers and show the text*/

.ds-advent-23 .et-pb-controllers a {
    display: inline-block;
    width: 20%;
    height: 50px;
    margin-right: 0;
    border-radius: 0;
    text-indent: 0;
    border-right: 1px solid rgba(255, 255, 255, .5);
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    -webkit-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

To change the number of slide controllers, simply divide 100 by the number of slides you have and change the width percentage in the above CSS to your result. 

For instance, 4 slides would be 25%, 6 slides would be 16.66% etc.

You can change the breakpoint of when the slide controllers start to stack in the following media query. Simply adjust the 980px value up or down depeding on your layout:

/*Adjust slide layout for mobile*/

@media all and (max-width: 980px) {
    /*Stack controllers*/
    .ds-advent-23 .et-pb-controllers a {
        width: 100%;
    }
    /*Add top margin to the slides - this value should be (number of slides * 50)*/
    .ds-advent-23 .et_pb_slides {
        margin-top: 250px;
    }
    /*Controller background colour*/
    .ds-advent-23 .et-pb-controllers a:not(.et-pb-active-control) {
        background-color: #6f88ae !important;
        opacity: .5;
    }
    /*Adjust padding*/
    .ds-advent-23 .et_pb_slide_with_image .et_pb_slide_description {
        padding: 30px;
    }
    /*Add active control bottom border*/
    .ds-advent-23 .et-pb-controllers .et-pb-active-control {
        border-bottom: 1px solid rgba(255, 255, 255, .7);
    }
}

If you have more or less than 5 slides you will want to adjust the margin-top: 250px; value. This value should be the number of slide you have, multiplied by 50. So for example 6 slides would be 6 * 50 = 300px.

The icons for the slide controls are set in the following section of CSS:

/*Define the icons*/


/*First slide*/

.ds-advent-23 .et-pb-controllers a:nth-child(1):before {
    content: '\e0e2';
}


/*Second slide*/

.ds-advent-23 .et-pb-controllers a:nth-child(2):before {
    content: '\e008';
}


/*Third slide*/

.ds-advent-23 .et-pb-controllers a:nth-child(3):before {
    content: '\e015';
}


/*Fourth slide*/

.ds-advent-23 .et-pb-controllers a:nth-child(4):before {
    content: '\e028';
}


/*Fifth slide*/

.ds-advent-23 .et-pb-controllers a:nth-child(5):before {
    content: '\e035';
}

You can swap out the ETModules icon font codes for the ones of your choice.

To add more icons simply duplicate the last CSS declaration and increase the nth-child number by 1, so for example if you added another slide you would add another declaration like this:

/*Sixth slide*/

.ds-advent-23 .et-pb-controllers a:nth-child(6):before {
    content: '\e049';
}