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);
});