Question

我的网站上有两个不同的轮播; 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
    });

Answer 1

我发现在Carousel div标注中调用data-interval =“false”修复此问题。

IE：

div id="myCarousel" class="carousel slide" data-interval="false"

Answer 2

如果您使用委托（例如使用.on（）方法）而不是绑定，您将获得所需的结果。你在这里遇到的问题是，当事件有类时，事件被绑定到对象...如果绑定到父元素并查找类，因为事件冒泡DOM并且类不存在，事件不会在滑块上触发。

即使删除了幻灯片类，Bootstrap轮播也会自动滑动

2 个答案: