Jquery slide plugin

Question

Jquery slide plugin

Navigation

#1 by (0 votes)

1

This js is all part of the next, prev and auto of my slide, but there is a "but": when I click on prev, it returns and then advances in the same action.

What's wrong with the logic in this 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>

jquery plugin

asked by anonymous 12.02.2015 / 14:13

1 answer

SQLite and Android database Screen Capture, decrease bitmap file size

score 0 · Answer 1

In HTML, add id="myCarousel" to <ul id="myCarousel" class="nav nav-pills nav-justified"> , which should look like this: <ul id="myCarousel" class="nav nav-pills nav-justified"> .

I also removed duplicity of two $(document).ready .

In addition, your snippet did not show the call to Jquery and Bootstrap, also included to make the example fully functional.

The final code looks like this:

$(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><scriptsrc="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>

I hope I have helped!

If this answer was helpful to you, do not forget to mark it as useful (+1).