Arrow to go back to the previous slide is not working

Navigation
0

Everything is working perfectly (taking the fact that <img> blinks before moving on to the next one), but the return arrow only repeats the same <img> regardless of which one it is going to be working normally. p> 

$(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();    
    }
});
#slide {
    width:100%;
    height:200px;
    display:block;
    overflow:hidden;
    margin:0;
}    
/*botões*/
#slide #botoes {
    display:none;
    position:absolute;
    margin: 5px;
    z-index:500;
}

#slide #botoes a{
    background:#333;
    width:50px;
    height:50px;
    display:inline-block;
    text-align:center;
    line-height:50px;
    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:200px;
    display:inline-block;
    position:relative;
}
#slide ul li img {
    width:100%;
    height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><sectionId="slide">
        <div id="botoes">
            <a href="#" class="voltar">&lt;</a>
            <a href="#" class="ir">&gt;</a>
        </div>
     <ul>
        <li><a href="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSBA6VZK0j-lpeTOOG8TKT2poSl9niHAK3NRXuxLlkwyXvkKjZAfA&"></a></li><li><ahref="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ7Qe6EEF5xKxngWS8FcOxE_y5LQRrGdfUKqEERSZYvXGTMgFu0&"></a></li><li><ahref="#"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSdHTTJqoCpmSBL2keZFcGwGFkOZKaXlUadgA_p7U1UC374sbJ8&"></a></li><li><ahref="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlQ6Unn_Tq8EDz21p1gWXcbYd7DE-qijAgwU4OyyM_-OPP-RuA&"></a></li>
     </ul>
</section>
    
asked by anonymous 27.02.2015 / 17:38

1 answer

0

Error 01 > Failed to correctly identify object ID:

  • function "Back": $ ("slide ul li"). last ()
  • Solution: $ ("# slide ul li"). last ()

Error 02 > Declaration of the Global Variable - Declaration of variable liWidth within $ (function () {}) - Solution: Declared before code as Global

The function "auto ()" put it out of $ (function () {}), since it does not have to be loaded and the call is already made in other parts of the code. But it's not a relative mistake. 

var liWidth;
$(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();
		//liWidth = $("#slide ul li").outerWidth();
		
		$("#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();    
}
#slide {
			width:100%;
			height:200px;
			display:block;
			overflow:hidden;
			margin:0;
		}    
		/*botões*/
		#slide #botoes {
			display:none;
			position:absolute;
			margin: 5px;
			z-index:500;
		}

		#slide #botoes a{
			background:#333;
			width:50px;
			height:50px;
			display:inline-block;
			text-align:center;
			line-height:50px;
			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:200px;
			display:inline-block;
			position:relative;
		}
		#slide ul li img {
			width:100%;
			height:100%;
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionId="slide">
        <div id="botoes">
            <a href="#" class="voltar">&lt;</a>
            <a href="#" class="ir">&gt;</a>
        </div>
		 <ul>
			<li><a href="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSBA6VZK0j-lpeTOOG8TKT2poSl9niHAK3NRXuxLlkwyXvkKjZAfA&"></a></li><li><ahref="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ7Qe6EEF5xKxngWS8FcOxE_y5LQRrGdfUKqEERSZYvXGTMgFu0&"></a></li><li><ahref="#"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSdHTTJqoCpmSBL2keZFcGwGFkOZKaXlUadgA_p7U1UC374sbJ8&"></a></li><li><ahref="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlQ6Unn_Tq8EDz21p1gWXcbYd7DE-qijAgwU4OyyM_-OPP-RuA&"></a></li>
		 </ul>
	</section>
    
11.04.2018 / 03:40
Calculate the page that an ID is located Function does not continue after second execution in same class