1

私のサイトには 2 つの異なるカルーセルがあります。1 つは自動スライドし、1 つは自動スライドしません。そうでないものについては、カスタム js を使用してページネーションを作成しています。

問題は、上記の 2 番目のもので、「スライド」クラスを削除しましたが、まだ自動スライドであることです。

自動スライドが必要な別のカルーセルがあるため、bootstrap.js 間隔を false に変更できません。(また、修正が必要なスクリプトとは別のスクリプトをページに含めたくありません。これは、サイト テンプレートの一部であり、乱雑になるためです)。

これがすべてのコードを含む私のjsFiddleです。http://jsfiddle.net/cindyg/UNKeL/4/

含まれている div に「スライド」クラスがないことがわかります。

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

ブートストラップ カルーセルが自動的にスライドしないなど、反対の問題について投稿し、言及された手法のいくつかを適用しても無駄であると人々が投稿しているのを見てきました。

ページネーションを取得するために追加したカスタム 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

0

バインドの代わりに委譲 (.on() メソッドなどを使用) を使用すると、目的の結果が得られます。ここでの問題は、クラスがあるときにイベントがオブジェクトにバインドされていることです...親要素にバインドし、イベントがDOMをバブルアップし、クラスが存在しないときにクラスを探すと、イベントはスライダーで発生しません。

于 2012-10-29T17:51:34.913 に答える