A seta de voltar não funciona

[timao 0]

Tudo esta funcionando perfeitamente (tirando o fato da <img> piscar antes de passar pra próxima), mas a seta de voltar só repete a mesma <img> independente de qual ela seja, a de ir está funcionando normalmente.

 

Mandando o código pra vcs darem uma olhada:

Código HTML:

 <div class="demonstrativo"> 
    	<section Id="slide">
        	<div id="botoes">
            	<a href="#" class="voltar"><</a>
                <a href="#" class="ir">></a>
            </div>
         <ul>
         	<li><a href="#"><img src="../Imagens/336x280_espanhol.jpg"></a></li>
            <li><a href="../Contatos.html"><img src="../Imagens/336x280_ingles.jpg"></a></li>
            
         </ul>
        </section>
        
    </div>

Código CSS:

/*Slide*/
.demonstrativo {
background:#FFF;
height:25em;
margin:0.5em 15%;
position:static;
}

	#slide{
	width:100%;
	height:25em;
	display:block;
	overflow:hidden;
	margin:0;
	position:absolute; 
	}	
		/*botões*/
		#slide #botoes{
		display:none;
		position:absolute;
		margin: 0.5em;
		z-index:500;
		}
		#slide #botoes a{
		background:#333;
		width:5em;
		height:50px;
		display:inline-block;
		text-align:center;
		line-height:5em;
		font: bold 23pt Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		color:#FFF;/*cor do botão ir voltar*/
		text-decoration:none;
		opacity:0.7;
		}
		#slide #botoes a:hover{ /*fundo do botão ir voltar*/
		background:#555;
		}
		/*imagens dentra da lista*/
		#slide ul {
		list-style:none;
		display:table;
		position:relative;
		}
			#slide ul li{
			width:100%;
			height:24em;
			display:inline-block;
			position:relative;
			}
			#slide ul li img{
			width:100%;
			height:100%;
			}

Código JS:

$(function(){
	//deslize automático
	var liWidth =$("#slide ul li").outerWidth(),
		speed =5000, /*velocidade do slide*/
		rotate = setInterval(auto,speed);
		
	//mostra os botões
	$("#slide").hover(function(){
		$("#botoes").fadeIn();	
		clearInterval(rotate);
	}, function(){
		$("#botoes").fadeOut();
		rotate = setInterval(auto,speed);
	});  
	
	//próximo
	$(".ir").click(function(e){
		e.preventDefault()
		
		$("#slide ul").css({'width':'99999%'}).animate({left:-liWidth}, function(){
			$("#slide ul li").last().after($("#slide ul li").first());
			$(this).css({'left':'0', 'width':'auto'});
		});
	});
	
	//voltar
	$(".voltar").click(function(e){
		e.preventDefault();
				
		$("#slide ul li").first().before($("slide ul li").last().css({'margin-left':-liWidth}));
		$("#slide ul").css({'width':'99999%'}).animate({left:liWidth}, function(){
			$("#slide ul li").first().css({'margin-left':'0'});
			$(this).css({'left':'0', 'width':'auto'});
			})
		})
	//deslize automático
	function auto(){
		$(".ir").click();	
	}
	});

[Rafael Sirotheau 43]

O que você esta querendo fazer? Qual é o efeito desejado? Trocar as imagens com slide? Trocar as imagens com fadeIn/out ?

[timao 0]

Se eu não entendi mal sua pergunta acho q os dois .....
Ele troca de img sozinho, mas tem a opção de trocar com a seta, mas algo acontece q a seta de voltar repete a mesma img....

 

a de ir passa pra próxima,mas a de voltar volta pra mesma ...

 

 

es o meu problema