1

I have two different carousels on my site; 1 that auto-slides, and 1 that doesn't. For the one that doesn't I'm using custom js to create pagination.

The problem is, that on the second one mentioned above, I removed the "slide" class but it's still auto-sliding.

Since I have the other carousel that does need to auto-slide, I can't change the bootstrap.js interval to false. (I also don't want to include a separate script on the page with the one I need to fix, because it's part of a site template and that gets messy).

Here is my jsFiddle with all the code. http://jsfiddle.net/cindyg/UNKeL/4/

You can see that the containing div does not have the "slide" class:

<div id="myCarousel" class="carousel">

I have seen people post about the opposite problem, such as Bootstrap Carousel Not Automatically Sliding and have applied some of the techniques mentioned, to no avail.

Here is the custom js I added to get the pagination:

$(document).ready(
        function() {
            $('#myCarousel').each(
                    function() {
                            var html = '<div class="carousel-nav " data-target="' + $(this).attr('id') + '"><ul>';

                            for(var i = 0; i < $(this).find('.item').size(); i ++) {
                                    html += '<li><a';
                                    if(i == 0) {
                                            html += ' class="active"';
                                    }

                                    var item = $(this).find('.item').get(i);

                                    html += ' href="#">&nbsp;'  + $(item).attr('data-title') + '</a></li>';
                            }

                            html += '</ul></li>';
                            $(this).after(html);
                            $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();
                    }
            ).bind('slid',
                    function(e) {
                            var nav = $('.carousel-nav[data-target="' + $(this).attr('id') + '"] ul');
                            var index = $(this).find('.item.active').index();
                            var item = nav.find('li').get(index);

                            nav.find('li a.active').removeClass('active');
                            $(item).find('a').addClass('active');

                            if(index == 0) {
                                    $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
                            } else {
                                    $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
                            }

                            if(index == nav.find('li').size() - 1) {
                                    $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
                            } else {
                                    $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
                            }
                    }
            );

            $('.carousel-nav a').bind('click',
                    function(e) {
                            var index = $(this).parent().index();
                            var carousel = $('#' + $(this).closest('.carousel-nav').attr('data-target'));

                            carousel.carousel(index);
                            e.preventDefault();
                    }
            );

            $('.carousel').carousel('cycle'); // Start the animation automatically
    });
Community
  • 1
  • 1
cindyg
  • 21
  • 5

2 Answers2

4

I found calling out data-interval="false" within the Carousel div callout fixed this.

IE:

div id="myCarousel" class="carousel slide" data-interval="false"
Zoomdak
  • 41
  • 2
0

If you use delegation (using .on() method, for example) instead of bind, you'll get your desired results. The problem you have here is that the event is being bound to the object when it has the class... if you bind to a parent element and look for the class as the event bubbles up the DOM and the class is not present, the event won't fire on the slider.

Joe Johnson
  • 1,814
  • 16
  • 20
  • That makes sense to me from a high level, but I am a total noob and not sure how to implement your suggestion. I tried replacing .bind with .on and nothing changed. Updated code: http://jsfiddle.net/cindyg/UNKeL/5/ ...In trying to understand I read http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html but I'm still a bit lost. Thank you for answering though! – cindyg Oct 29 '12 at 22:10