1

ここで奇妙な問題が発生しました。これに遭遇した人は他にいません。

私のカルーセルは、Chrome、Safari、Firefox (mac および pc) では正常に動作しますが、IE7 および 8 では、ページの読み込み時に最初のスライドが表示された後、スライドが完全に順不同で表示されます。最初のスライドは常に正しいです。前/次のボタンを使い始めると、正しい順序で循環します。

しかし、私は他に 2 人に 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
}

);

何か案は？みんなありがとう。

4

0 に答える 0