adash,
Пример: карусель
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-pro-users{background:#45c77f;text-align:center;}
.main-pro-users .body{height:250px;position:relative;max-width:990px;overflow:hidden;margin:0 auto}
.main-pro-users .widget_profiles_list{width:10000px;position:absolute;top:50px;}
.main-pro-users .widget_profiles_list.list .item{padding:0 0 10px 0;float:left;box-sizing:border-box;overflow:hidden;display:inline-block;width:145px;margin:0 10px;}
.main-pro-users .widget_profiles_list.list .item .name{padding:15px 0 10px 0;}
.main-pro-users .widget_profiles_list .item .image img,.item-avatar>img{display:block;width:64px;height:64px;}
.main-pro-users .widget_profiles_list.list .item .info{position:relative;background:#fff;margin-top:25px;}
.main-pro-users .info .name a{font-weight:700;text-decoration:none;color:#444;}
.carousel-arrow-left,.carousel-arrow-right{float:left;display:block;border:1px solid grey;background-color:lightgrey;padding:5px;}
.carousel-arrow-left:hover,.carousel-arrow-right:hover{cursor:pointer;background-color:grey;}
.carousel-arrow-left{margin-right:25px;}
.carousel-arrow-right{float:right;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var leftUIEl = $(".carousel-arrow-left");
var rightUIEl = $(".carousel-arrow-right");
var elementsList = $(".body");
var currentLeftValue = 0;
var item = elementsList.find(".item");
var pixelsOffset = item.innerWidth() + 20;
var minimumOffset = -(item.length * pixelsOffset - elementsList.width());
var maximumOffset = 0;
var List = $(".widget_profiles_list");
leftUIEl.click(function() {
currentLeftValue -= pixelsOffset;
if (currentLeftValue < minimumOffset) currentLeftValue = minimumOffset;
List.animate({
left: currentLeftValue + "px"
}, 500)
});
rightUIEl.click(function() {
currentLeftValue += pixelsOffset;
if (currentLeftValue > maximumOffset) currentLeftValue = maximumOffset;
List.animate({
left: currentLeftValue + "px"
}, 500)
})
});
</script>
</head>
<body>
<div class="widget main-pro-users">
<div class="body">
<div class="carousel-arrow-left"><span>Влево</span></div>
<div class="widget_profiles_list list">
<div class="item">
<div class="image">
<a href="/users/1" title="1а">
<img src="/b5842915.png" alt="1" title="Тех 1"> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/1">1</a>
</div>
<div class="fields">
<div class="field ft_string f_specialisation">
</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/7" title="Компания 1">
<img src="/upload/000/u7/001/cda4eae6.jpg" alt="Компания 1" title="Компания 1"> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/7">Компания 1</a>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/5" title="Алексей Б.">
<img src="/upload/default/avatar_small.jpg" alt="Алексей Б." title="Алексей Б."> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/5">Алексей Б.</a>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/2" title="Юля Ву">
<img src="/upload/000/u2/000/2ce94bb2.jpg" alt="Юля Ву" title="Юля Ву"> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/2">Юля Ву</a>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/3" title="Н.К.">
<img src="/upload/000/u3/000/311a6096.png" alt="Н.К." title="Н.К."> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/3">Н.К.</a>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/502" title="Никита Геннадьевич">
<img src="/upload/000/u0/000/6badac48.jpg" alt="Никита Геннадьевич" title="Никита Геннадьевич"> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/502">Никита Геннадьевич</a>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/613" title="Частное лицо">
<img src="/upload/000/u0/000/68ecf056.jpg" alt="Частное лицо" title="Частное лицо"> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/613">Частное лицо</a>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/674" title="Накрути">
<img src="/upload/006/u674/000/be9c2c24.jpg" alt="Накрути" title="Накрути"> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/674">Накрути</a>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/688" title="Жазира З.">
<img src="/upload/006/u688/000/19922c8b.jpg" alt="Жазира З." title="Жазира З."> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/688">Жазира З.</a>
</div>
</div>
</div>
<div class="item">
<div class="image">
<a href="/users/689" title="Жазгуль Осмонова">
<img src="/upload/006/u689/000/b807b547.jpg" alt="Жазгуль Осмонова" title="Жазгуль Осмонова"> </a>
</div>
<div class="info">
<div class="name">
<a href="/users/689">Жазгуль Осмонова</a>
</div>
</div>
</div>
</div>
<div class="carousel-arrow-right"><span>Вправо</span></div>
</div>
</div>
</body>
</html>