Back arrow to the previous slide is not working

Asked

Viewed 144 times

0

Everything is working perfectly (apart from the fact of <img> blink before moving to next), but the return arrow only repeats the same <img> regardless of which it is, the go is working normally.

$(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>
<section Id="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><a href="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ7Qe6EEF5xKxngWS8FcOxE_y5LQRrGdfUKqEERSZYvXGTMgFu0&"></a></li>
        <li><a href="#"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSdHTTJqoCpmSBL2keZFcGwGFkOZKaXlUadgA_p7U1UC374sbJ8&"></a></li>
        <li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlQ6Unn_Tq8EDz21p1gWXcbYd7DE-qijAgwU4OyyM_-OPP-RuA&"></a></li>
     </ul>
</section>

javascript

  • Can you show it working? Because it’s not very clear

  • @Lucas I don’t have pq I’m developing yet...

  • @Guilhermenascimento did not understand well.... where do I have to add the Jquery library?... I have it saved and included in my project... If tah talking about putting her here? How do I do that?

  • @luizhenrique what he wants is that at the very least you reproduce the problem, see I edited your code in the question and now he makes the least possible for others to understand your problem, no use pasting a lot of things and at least not being able to even reproduce the problem, so it becomes difficult to understand the doubt, but now it is working :) just missing someone to discover the problem of "volar"

  • @Guilhermenascimento thank you very much... Now I understand what you mean... I still understand how I should post here... Thank you very much... Abçs

  • I found a source in English: http://meta.pt.stackoverflow.com/q/2115/3635

  • Easy to understand and use, next time don’t make the same mistake... Vlw ai for help..

  • @Guilhermenascimento I was actually the one who altered the post to use the Stacksnippet, before it had only as the code in the form of samples.

  • @Tobymosque understood, thank you for reporting.

Show 4 more comments

1 answer

0

Error 01 > Failed to identify object ID correctly:

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

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

The "auto()" function I put out of $(Function(){}) because it does not need to be loaded and the call is already made in other parts of the code. But it is not relatively a 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>
<section Id="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><a href="#"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ7Qe6EEF5xKxngWS8FcOxE_y5LQRrGdfUKqEERSZYvXGTMgFu0&"></a></li>
			<li><a href="#"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSdHTTJqoCpmSBL2keZFcGwGFkOZKaXlUadgA_p7U1UC374sbJ8&"></a></li>
			<li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlQ6Unn_Tq8EDz21p1gWXcbYd7DE-qijAgwU4OyyM_-OPP-RuA&"></a></li>
		 </ul>
	</section>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.