Question

奇怪的问题在这里，我找不到其他人遇到过它。

我的旋转木马在Chrome，Safari和Firefox（mac和pc）中运行良好，但在IE7和8中，在第一张幻灯片出现在页面加载后，幻灯片完全无序。第一张幻灯片始终是正确的。如果我开始使用上一个/下一个按钮，它们将以正确的顺序循环。

但是，我还有另外两个人在Chrome，FF和Safari中测试过，而且他们有时会出现故障。

bootstrap-carousel.js与原版（新下载的）没有任何关系。

我的网站上有一些使用分页的其他旋转木马会有一些自定义js。但是这个并没有使用它。自定义代码不引用问题轮播的div id。但是，当我将页面上的链接删除到自定义js时，问题就消失了，所以很明显它是相关的，但我无法弄清楚原因。

这是HTML：

<div id="myCarousel" class="carousel">
        <div class="carousel-inner">
          <div class="item active">
            <img src="images/home-slide-girl.jpg" alt="">
          </div>
          <div class="item">
            <img src="images/home-slide-woman.jpg" alt="">
          </div>
          <div class="item">
            <img src="images/home-slide-mom.jpg" alt="">
          </div>
          <div class="item">
            <img src="images/home-slide-choco.jpg" alt="">
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
      </div><!-- end myCarousel -->

这是其他旋转木马用于分页的自定义js：

$(document).ready(
function() {
    $('#myCarousel2, #myCarousel3').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
}

）;

有什么想法吗？谢谢你们。

Bootstrap轮播滑动故障

0 个答案: