1

我的网站上有两个不同的轮播；1个自动滑动，1个不自动滑动。对于没有的我使用自定义 js 来创建分页。

问题是，在上面提到的第二个中，我删除了“slide”类，但它仍然是自动滑动的。

由于我有另一个需要自动滑动的轮播，我无法将 bootstrap.js 间隔更改为 false。（我也不想在页面上包含我需要修复的单独脚本，因为它是站点模板的一部分并且会变得混乱）。

这是我的 jsFiddle 和所有代码。http://jsfiddle.net/cindyg/UNKeL/4/

可以看到包含的 div 没有“slide”类：

<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
    });
4

2 回答 2

4

我发现在 Carousel div 标注中调用 data-interval="false" 修复了这个问题。

IE：

div id="myCarousel" class="carousel slide" data-interval="false"
于 2013-06-03T19:11:39.460 回答
0

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

于 2012-10-29T17:51:34.913 回答