Mi código de javascript se ejecuta en cuanto carga la página, cuando se debería ejecutar al darle click a un botón. Aclaro que los tres puntos serían botones del slider, dichos botones deberían pintarse de color verde al darles click, pero los 3 se pintan en cuando carga la página. Gracias de antemano
'use strict'
function slider_inicio(nro_boton){
$('.nro'+nro_boton).css("backgroundColor","#B3E705");
$('.info_inicio').css("clipPath","polygon(0 0,100% 0%,100% 100%,0 100%)");
}
$(document).ready(()=>{
$('.nro1').click(slider_inicio(1));
$('.nro2').click(slider_inicio(2));
$('.nro3').click(slider_inicio(3));
});
body, html {
background-image: url(https://www.anahuac.mx/generacion-anahuac/sites/default/files/2018-02/hyper_x.JPG);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%; }
#inicio {
width: 100%;
height: 35rem; }
#inicio .info_inicio {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #208ED1;
width: 100%;
height: 35rem;
padding: 5rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-clip-path: polygon(0 0, 40% 0%, 40% 100%, 0 100%);
clip-path: polygon(0 0, 40% 0%, 40% 100%, 0 100%);
-webkit-transition: 5s ease-in-out 0s;
-o-transition: 5s ease-in-out 0s;
transition: 5s ease-in-out 0s; }
#inicio .info_inicio h2 {
color: #B3E705;
font-family: Raleway;
font-size: 2rem; }
#inicio .info_inicio p {
color: #FAFAFA;
font-family: WorkSans;
font-size: 1.2rem;
width: 25%;
margin-top: 2.5rem;
margin-bottom: 5rem; }
#inicio .info_inicio .iterador_img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around; }
#inicio .info_inicio .iterador_img div {
width: 1rem;
height: 1rem;
border-radius: 50%;
margin: 0 1rem;
background-color: #FAFAFA;
cursor: pointer;
cursor: hand;
-webkit-transition: .2s ease-in-out 0s;
-o-transition: .2s ease-in-out 0s;
transition: .2s ease-in-out 0s; }
#inicio .info_inicio .iterador_img div:hover {
background-color: #c7c7c7; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inicio">
<div class="info_inicio">
<h2>Lorem Impsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis ex dolorum.</p>
<div class="iterador_img">
<div class="nro1" style="background-color:#B3E705;"></div>
<div class="nro2"></div>
<div class="nro3"></div>
</div>
</div>
</div>