var minimumOffset = — ((elementsCount — 5) * pixelsOffset);
alert('—'.charCodeAt(0) + ' ' + '-'.charCodeAt(0));
<!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>
