Carrossel de imagens! Java script.

Gente vim aqui procura ajuda já no meu limite, bom sou "Médio" diga-se assim em Java script e sei o básico dessa incrível plataforma de programação, Bom, é o seguinte a 2 dias tento desenvolver um carrossel de imagem semelhante ao carrossel de imagens de posteres do filmes do xbox video . Não o que mostra os banners mais sim que mostra os posteres igual uma vitrine, onde é possível clicar no botão esquerdo e direito e os posteres rolam. Link da imagem

Bom segue o codigo que tentei fazer. funcionou algumas coisas mais. sem sucesso. desde já agradeço. preciso muito desse carrossel

CSS

<style type="text/css">
, :after, *:before {

 box-sizing: border-box;
}
#carrussel{
overflow: visible;
height: 295px;
width: 100%;
 margin: 0px;
background-color:rgba(82,82,82,1.00);
}

#carrussel div.wrapper-carrussel{

 position: relative;
 overflow: hidden;
 width: 100%;
 height: 100%;
}

#carrussel ul.carousel-container{

position: relative;
margin: 0px;
padding: 0px;
list-style: none outside none;
left: 0px;
}

#carrussel li.carousel-item{

height: 295px;
margin-right: 2px;
 width: 158px;
 padding: 0px;
 float: left;
list-style: none outside none;
background-color:rgba(138,138,138,1.00);
}
</style>
<script type="text/javascript">
$(document).ready(function() {
 var li_intem = $(".carousel-item").width();
var duvelement = $('.wrapper-carrussel').width();
var leftElement = $(".carousel-container").css('left');
var cout_li = $('li').length;
ulcarrusel = $("ul.carousel-container");

var next = $(".next");
var right = $(".after");

someElementes = (cout_li*li_intem);

ul = (cout_li*li_intem);
ulcarrusel.css({'width':someElementes,'left':'0'});
var coutleft = ulcarrusel.css('left');

elements = 7;

$(".after").click(function(e) {
$(".valores").html(elements);

ulcarrusel.animate({"left":-duvelement});
$(".next").click(function(){
ulcarrusel.animate({'left':duvelement-duvelement});
})
 });
});
</script>
<div class="valores"></div>
<a href="#" class="next">Next</a>
<a href="#" class="after">Anter</a>
<div class="carrussel" id="carrussel">
<div class="wrapper-carrussel">
 <ul class="carousel-container">
 <li class="carousel-item">1</li>
 <li class="carousel-item">2</li>
 <li class="carousel-item">3</li>
 <li class="carousel-item">4</li>
 <li class="carousel-item">5</li>
 <li class="carousel-item">6</li>
 <li class="carousel-item">7</li>
 <li class="carousel-item">8</li>
 <li class="carousel-item">9</li>
 <li class="carousel-item">10</li>
 <li class="carousel-item">11</li>
 <li class="carousel-item">12</li>
 <li class="carousel-item">13</li>
 <li class="carousel-item">14</li>
 <li class="carousel-item">15</li>
 <li class="carousel-item">16</li>
 <li class="carousel-item">17</li>
 <li class="carousel-item">18</li>
 <li class="carousel-item">19</li>
 </ul>
 </div></div>