1

Este js faz toda parte de next,prev e auto do meu slide, mas há um "porém": quando eu clico em prev, ele volta e depois avança na mesma ação.

O que tem de errado na lógica deste script?

JS:

$(document).ready( function() {
    $('#myCarousel').carousel({
        interval:   4000
    });

    var clickEvent = false;
    $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');        
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav').children().length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            if(count == id) {
                $('.nav li').first().addClass('active');    
            }
        }
        clickEvent = false;
    });
        $(document).ready(function(){

                $(".prev-slide").click(function(){
                var count = $('.nav').children().length -1;
                var current = $('.nav li.active');
                current.removeClass('active').prev().addClass('active');
                    var id = parseInt(current.data('slide-to'));
    });
    });
 });

HTML:

 <ul class="nav nav-pills nav-justified">
            <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">INTERCAMBIO</a></li>
            <li data-target="#myCarousel" data-slide-to="1"><a href="#">AÉREO</a></li>
            <li data-target="#myCarousel" data-slide-to="2"><a href="#">PHENOMENAL</a></li>
            <li data-target="#myCarousel" data-slide-to="3"><a href="#">CURSOS</a></li>
            </ul>  
5
  • pq tem um $(document).ready() dentro de outro? Commented 12/02/2015 às 15:33
  • Qual é o carousel que estás a usar? não tem métodos para fazer mudar as imagens sem teres de fazer à mão?
    – Sergio
    Commented 12/02/2015 às 16:15
  • Sim, mas eu quero que os controladores fiquem com um background quando a imagem passar, é tipo um active.. mas não estou conseguindo..
    – Alexandre
    Commented 12/02/2015 às 17:31
  • Eu não manjo muito de jquery, tentei adaptar, mas acho que não funfou direito.. algo referente á isso que estou tentando fazer..imgur.com/XwZqyqA
    – Alexandre
    Commented 12/02/2015 às 17:31
  • Olá, coloque seu código no site www.bootply.com, assim podemos ajudá-lo melhor Commented 11/03/2016 às 17:40

1 Resposta 1

0

Em HTML, adicione id="myCarousel" no <ul id="myCarousel" class="nav nav-pills nav-justified">, que deve ficar assim: <ul id="myCarousel" class="nav nav-pills nav-justified">.

Também removi a duplicidade de dois $(document).ready.

Além disso, seu trecho de código (snippet) não mostrava a chamada ao Jquery e ao Bootstrap, também incluí para ficar completamente funcional o exemplo.

O código final ficou assim:

$(document).ready( function() {
    $('#myCarousel').carousel({
    	interval:   4000
	});
	
	var clickEvent = false;
	$('#myCarousel').on('click', '.nav a', function() {
	    clickEvent = true;
		$('.nav li').removeClass('active');
		$(this).parent().addClass('active');		
	}).on('slid.bs.carousel', function(e) {
		if(!clickEvent) {
		    var count = $('.nav').children().length -1;
			var current = $('.nav li.active');
			current.removeClass('active').next().addClass('active');
			var id = parseInt(current.data('slide-to'));
			if(count == id) {
				$('.nav li').first().addClass('active');	
			}
		}
		clickEvent = false;
	});
       
    $(".prev-slide").click(function(){
        var count = $('.nav').children().length -1;
        var current = $('.nav li.active');
        current.removeClass('active').prev().addClass('active');
        var id = parseInt(current.data('slide-to'));
    });
	
	
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<ul id="myCarousel" class="nav nav-pills nav-justified">
    <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">INTERCAMBIO</a></li>
    <li data-target="#myCarousel" data-slide-to="1"><a href="#">AÉREO</a></li>
    <li data-target="#myCarousel" data-slide-to="2"><a href="#">PHENOMENAL</a></li>
    <li data-target="#myCarousel" data-slide-to="3"><a href="#">CURSOS</a></li>
</ul>  

Espero ter ajudado!

Se esta resposta foi útil para você, não se esqueça de marcá-la como útil (+1).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .