Jquery slide plugin

Asked

Viewed 69 times

1

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

What is wrong with the logic of 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

  • pq has a $(Document). ready() inside another?

  • What is the carousel what are you using? it has no methods to change the images without having to do it by hand?

  • Yes, but I want the controllers to have a background when the image passes, it’s like an active.. but I’m not getting a background...

  • I don’t know much about jquery, I tried to adapt, but I guess it didn’t really matter.. Something about what I’m trying to do.. http://imgur.com/XwZqyqA

  • Hello, put your code on the site www.bootply.com, so we can help you better

1 answer

0

In HTML, add id="myCarousel" in the <ul id="myCarousel" class="nav nav-pills nav-justified">, that should stay that way: <ul id="myCarousel" class="nav nav-pills nav-justified">.

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

Also, its code snippet (snippet) did not show the call to Jquery and Bootstrap, also included to be fully functional the example.

The final code went 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>
<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>

I hope I’ve helped!

If this answer was helpful to you, be sure to mark it as useful (+1).

Browser other questions tagged jquery plugin

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