Привет народ, начал изучать JQuery и решил сделать слайдер. Все работает, но хотелось бы навести красоту. Нужно переместить эти стрелки чуть вверх и влево/вправо. Только не пишите, что-то вроде: какой ужасный код!!! Да как вы в нем сами- то разбираетесь!!!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Cats blog это сайт о котах, кошках и всем, что с ними связанно.">
<meta name="keywords" content="Кот, кошка, сайт о котах, домашнии животные">
<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>
</head>
<!-- Сам сайт -->
<body>
<!-- Код для слайдера 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="Кот"><a id="slideu" href="#" onclick="up()"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></center>
<!-- Код для слайдера jquery -->
<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>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
}
center img{
width: 80vw;
height: 40vh;
}
#slided{
text-decoration: none;
color: #4a4444;
font-size: 1.7em;
transition: all 0.3 ease;
}
#slided:hover{
transition: all 0.3 ease;
color: #877a7a;
font-size: 1.9em;
}
#slideu{
text-decoration: none;
color: #4a4444;
font-size: 1.7em;
transition: all 0.3 ease;
}
#slideu:hover{
transition: all 0.3 ease;
color: #877a7a;
font-size: 1.9em;
}
Простой
