Карусель Bootstrap автоматически скользит, даже если класс слайда удален

У меня на сайте две разные карусели; 1 с автоматическим скольжением и 1 без. Для тех, кто этого не делает, я использую пользовательские js для создания разбивки на страницы.

Проблема в том, что во втором, упомянутом выше, я удалил класс «слайд», но он по-прежнему автоматически скользит.

Поскольку у меня есть другая карусель, которая должна автоматически скользить, я не могу изменить интервал bootstrap.js на false. (Я также не хочу включать на страницу отдельный скрипт с тем, который мне нужно исправить, потому что он является частью шаблона сайта, и это становится беспорядочным).

Вот мой jsFiddle со всем кодом. http://jsfiddle.net/cindyg/UNKeL/4/

Вы можете видеть, что содержащий div не имеет класса "слайд":

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

Я видел, как люди писали о противоположной проблеме, например, Bootstrap Carousel Not Automatically Sliding и применили некоторые из упомянутых методов, но безрезультатно.

Вот пользовательский js, который я добавил для разбивки на страницы:

$(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
    });

person cindyg    schedule 29.10.2012    source источник


Ответы (2)


Я обнаружил, что вызов data-interval = "false" в выноске Div карусели исправил это.

IE:

div id="myCarousel" class="carousel slide" data-interval="false"
person Zoomdak    schedule 03.06.2013

Если вы используете делегирование (например, с помощью метода .on ()) вместо bind, вы получите желаемый результат. Проблема здесь в том, что событие привязывается к объекту, когда у него есть класс ... если вы привязываетесь к родительскому элементу и ищете класс, когда событие всплывает вверх по DOM, а класс отсутствует, событие не будет запускаться на слайдере.

person Joe Johnson    schedule 29.10.2012
comment
Для меня это имеет смысл с высокого уровня, но я полный новичок и не уверен, как реализовать ваше предложение. Я попытался заменить .bind на .on, но ничего не изменилось. Обновленный код: jsfiddle.net/cindyg/UNKeL/5 ... Пытаясь понять Я прочитал elijahmanor.com/2012/02/ но я все еще немного заблудился. Спасибо, что ответили! - person cindyg; 30.10.2012