Carrossel de imagens! Java script.

[Mark Augusto 0]

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> 

[wilnet 92]

Não funciona porque seu code está bem incompleto, tanto CSS como no JS.

 

Olhando no site que passou, falta mais informação para vc ai. principalmente o apontamento para as imagens.

[Mark Augusto 0]

Oi cara. Não peguei de um site. EU que fiz. mais vou tenta novamente

[Rafael Sirotheau 43]

Teu evento de click no .next, ta dentro do evento de click do .prev.

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

ulcarrusel.animate({"left":-duvelement});
$(".next").click(function(){
ulcarrusel.animate({'left':duvelement-duvelement});
})
    }); 

Não deveria estar assim?

$(".after").click(function(e) {
    $(".valores").html(elements);
    ulcarrusel.animate({"left":-duvelement});
})
$(".next").click(function(){
    ulcarrusel.animate({'left':duvelement-duvelement});
}); 

Ficando assim, como você fez, o event listener só vai ser adicionado no .next quando o .prev for clicado.

[Mark Augusto 0]

Obrigado amigo, mais assim se vc testou o código completo... viu que o carrossel ta descoordenado. é isso que ta errado.

[Ted k' 126]

Desculpa, eu não tenho como testar agora, mas... quando você fala descoordenado é o que?

[Rafael Sirotheau 43]

Que tal colocar seu codigo no JSFiddle ou JSBin para facilitar a depuração?