Modify dots on slider nav bar

customslider
im trying to make this custom slider, This is what I have achieved so far with webflow
https://alejandros-cool-project-9-8251d4387b2f2.webflow.io/

i want to add a button thats interacts with the slider and the yellow dots below the text

this is my code so far:

Head code :

.w-slider-dot {
background: white;
margin-top: 1%;
color: red;
width: 5%;
height: 25%;

}

.nav-design {
display: flex;
}

.w-slider-dot.w-active {
background: white;
color: black;
font-weight: bolder;
margin-top: -0.2%;
width: 5%;
height: 25%;
}

Footer code:

$(document).ready(function() {
	// config
	label1 = 'prueba1';
	label2 = 'prueba2';
	label3 = 'prueba3';
  	label4 = 'prueba4';
	label5 = 'prueba5';
	label6 = 'prueba6';
  	label7 = 'prueba7';
	label8 = 'prueba8';
	label9 = 'prueba9';

	// do not touch
	imgbegin = '<img src="';
	imgend = '" />';
	// end

	// First dot.
	$('.w-slider-nav').children('div:nth-child(1)').html(label1);
	// Second dot.
	$('.w-slider-nav').children('div:nth-child(2)').html(label2);
	// Third dot.
	$('.w-slider-nav').children('div:nth-child(3)').html(label3);
    // Fourth dot.
  	$('.w-slider-nav').children('div:nth-child(4)').html(label4);
    // Fifth dot.
	$('.w-slider-nav').children('div:nth-child(5)').html(label5);
    // Sixth dot.
	$('.w-slider-nav').children('div:nth-child(6)').html(label6);
    // Seventh dot.  
  	$('.w-slider-nav').children('div:nth-child(7)').html(label7);
    // Eight dot.
	$('.w-slider-nav').children('div:nth-child(8)').html(label8);
    // Nineth dot.
	$('.w-slider-nav').children('div:nth-child(9)').html(label9);

  
});