The positioning of the arrows for the slider?

Hi folks, started learning JQuery and decided to make a slider. Everything works, but I would like to bring beauty. Need to move these arrows just up and to the left/right. Do not write that kind of horrible code!!! But how you do something are good!!!

59d90c51bf593762692157.png

HTML



 <meta charset="utf-8">
 <meta name="description" content="Cats blog is a site about cats, cats and everything connected with them.">
 <meta name="keywords" content="cat, cat, a site about cats, animals Domashniy">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Cats blog</title>
 <link rel="shortcut icon" href="icon.ico" type="image/x-icon">
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 <!-- The site itself -->

 <!-- Code for slider html -->
<center><a id="slided" href="#" onclick="down()"><i class="fa fa-chevron-left" aria-hidden="true"></i></a><img src="1.jpg" id="img" alt="cat"><a id="slideu" href="#" onclick="up()"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></center>
<!-- Code for jquery slider -->
the <script>
var num=1;
 function up(){
if(num>=4){
num=1;
$(function(){
$("#img").attr({"src":num+".jpg"})
});
}else{
num++;
$(function(){
$("#img").attr({"src":num+".jpg"})
});
}
}

 function down(){
if(num<=1){
num=4;
$(function(){
$("#img").attr({"src":num+".jpg"})
});
}else{
num--;
$(function(){
$("#img").attr({"src":num+".jpg"})
});
}
}

</script>



CSS

*{
 padding: 0;
 margin: 0;
}

body{
 width: 100%;
}

center img{
width: 80vw;
height: 40vh;
}

#slided{
 text-decoration: none;
 color: #4a4444;
 font-size: 1.7 em;
 transition: all 0.3 ease;
}

#slided:hover{
 transition: all 0.3 ease;
 color: #877a7a;
 font-size: 1.9 em;
}


#slideu{
 text-decoration: none;
 color: #4a4444;
 font-size: 1.7 em;
 transition: all 0.3 ease;
}

#slideu:hover{
 transition: all 0.3 ease;
 color: #877a7a;
 font-size: 1.9 em;
}
June 14th 19 at 19:05
1 answer
June 14th 19 at 19:07
Solution
Well, as an option to give classes to these buttons, then give position: absolute and position it as you want.
Before that, of course, the parent unit to give a relative

Find more questions by tags CSSHTMLJavaScriptjQuery