(Jquery) Slider - arrows do not take into account what image is

I'm trying to create a jquery slider, I started creating the arrows backwards and forwards and they worked fine, then I wanted to create the buttons below so the user can click and go to the image he wants, and they work well , but my problem is that when I give a button below and then I want to use the arrows, this does not know what image is and does not work, and the same happens if I use the arrows and then I want to give a button below

$(document).ready(function(){
slider(500);
function slider(velocidad){

 var x=1;
 var numImg= $(".grande img").length;
 var ultimoMargin= -(numImg-1)*1000+"px";

$(".grande").css("width", numImg * 1000 + "px");

$(".next").click(function(){
    $(".grande").animate({"margin-left":"+=-1000"},velocidad);
    x++;

    if(x == numImg){
        $(".grande").animate({"margin-left":"0px"},0);
        x = 1;
    }

});

$(".prev").click(function(){

    if(x == 1){
        $(".grande").animate({"margin-left": ultimoMargin},0);
        x = numImg;
    }

    $(".grande").animate({"margin-left":"+=1000"},velocidad);
    x--;
});

$(".boton").click(function(){
     paginationPos = $(this).index() + 1;
            console.log(paginationPos);


            $("img").hide();
            $("img:nth-child("+ paginationPos +")").fadeIn();

        });
    }
});

Code with html and css link