Igor710,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
background-color: #D3D3D3
}
#wrapper{
margin:50px auto;
width:640px;
}
#carousel{
display:block;
position:relative;
}
li{
list-style:none;
display:none;
position:absolute;
}
#carousel li:first-child{
display:block;
}
#cl_left,#cl_right{
width:50px;
height:50px;
position:absolute;
z-index:10;
top:150px;
opacity:.5;
cursor:pointer;
background-repeat:no-repeat;
background-size:100% 100%;
}
#cl_left:hover,#cl_right:hover{
opacity:1;
}
#cl_left{
left:10px;
background-image:url(https://www.gentec-eo.com/Content/images/home/slider/left-arrow.png);
}
#cl_right{
right:20px;
background-image:url(https://www.gentec-eo.com/Content/images/home/slider/right-arrow.png);
}
.buttons{
position:relative;
}
#thumbs-wrapper{
position:relative;
margin:0 auto;
top:405px;
text-align:center;
}
#thumbs-wrapper img{
border:1px solid #FFFFFF;
box-sizing: border-box;
margin:4px;
width: 65px;
height: 40px;
border-radius: 4px;
}
#thumbs-wrapper .selected img{
border:2px solid #000000;
}
#carousel img{
border-radius: 12px;
border:2px solid #FFFFFF;
width: 650px;
height: 400px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="wrapper">
<div class='buttons'>
<div class="left" id="cl_left"></div>
<div class='right' id="cl_right"></div>
</div>
<ul id="carousel">
<li id="1jpg"><img src="http://v-leto.ru/wp-content/uploads/2015/11/indoneziya-1-e1446822043453.jpg" /></li>
<li id="2jpg"><img src="http://cdn2.insidermonkey.com/blog/wp-content/uploads/2015/07/shutterstock_100200350.jpg" /></li>
<li id="3jpg"><img src="http://www.breeze.ru/files/images/papua-new-guinea.jpg" /></li>
<li id="4jpg"><img src="http://www.vedomosti.md/uploads/articles.53253.m.jpg" /></li>
<li id="5jpg"><img src="https://d1x3cbuht6sy0f.cloudfront.net/sales/2751/5e0dd9a7_564e_4d14_be31_71965fd8e463.jpg" /></li>
<li id="6jpg"><img src="http://www.unextour.ru/Pictures/Guide/ct1098_1608301451595599.JPG" /></li>
</ul>
<div id="thumbs-wrapper">
<div id="thumbs">
<a href="#1jpg" class="selected"><img src="http://v-leto.ru/wp-content/uploads/2015/11/indoneziya-1-e1446822043453.jpg" /></a>
<a href="#2jpg"><img src="http://cdn2.insidermonkey.com/blog/wp-content/uploads/2015/07/shutterstock_100200350.jpg" /></a>
<a href="#3jpg"><img src="http://www.breeze.ru/files/images/papua-new-guinea.jpg" /></a>
<a href="#4jpg"><img src="http://www.vedomosti.md/uploads/articles.53253.m.jpg" /></a>
<a href="#5jpg"><img src="https://d1x3cbuht6sy0f.cloudfront.net/sales/2751/5e0dd9a7_564e_4d14_be31_71965fd8e463.jpg" /></a>
<a href="#6jpg"><img src="http://www.unextour.ru/Pictures/Guide/ct1098_1608301451595599.JPG" /></a>
</div>
</div>
</div>
<script>
$(function() {
var $li = $("#carousel li"),
len = $li.length,
$next = $("#cl_right"),
$prev = $("#cl_left"),
$thumbs = $("#thumbs a"),
direction = ["right", "left"],
spide = 1600,
pause = 0,
next = 1,
num = 0;
function func(event) {
$li.eq(num).stop(true, true).delay(pause).hide("slide", {
easing: "easeInOutQuad",
direction: direction[0]
}, spide);
$li.eq(next).stop(true, true).delay(pause).show("slide", {
easing: "easeInOutQuad",
direction: direction[1]
}, spide)
}
function setNum() {
$thumbs.removeClass("selected").eq(next).addClass("selected");
func();
num = next
}
$next.on({
click: function() {
next = (num + 1) % len;
direction = ["left", "right"];
setNum()
}
});
$prev.on({
click: function() {
next = num - 1;
next < 0 && (next = len - 1);
direction = ["right", "left"];
setNum()
}
});
$thumbs.on({
click: function(event) {
event.preventDefault();
next = $thumbs.index(this);
direction = next > num ? ["left", "right"] : ["right", "left"];
setNum()
}
})
});
</script>
</body>
</html>