8

私はちょうどjavascriptを学んでいるので、ここで我慢してください。同じコントロールを使用して、ブートストラップで 2 つのカルーセルを開始しようとしています。

現在の設定では、カルーセルの ID を含む href タグが各カルーセルを制御しています。最小限の変更で同じコントロールを使用して両方をリンクする方法について誰かアドバイスがありますか?

HTMLは次のとおりです。

<div id="asHero">
                <div id="walkThrough" class="carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item">
                            <div class="span5">
                                <h1>Discover</h1>
                                <p class="heroDesc">Explore the active side of the world around you.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="span5">
                                <h1>Track</h1>
                                <p class="heroDesc">Keep tabs on frequency and personal bests.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest2.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="span5">
                                <h1>Conquer</h1>
                                <p class="heroDesc">Earn points and awards for everything you do in your active life.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest3.png" />
                            </div>
                        </div>
                    </div>
                    <!-- Carousel nav -->

                    <a class="carousel-control right visible-desktop" href="#walkThrough" data-slide="next">&rsaquo;</a>
                </div>
            </div> <!-- /asHero -->
            <div id="asPhone">
                <div id="walkThrough-2" class="carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item">
                            <div class="span5">
                                <h1>Discover</h1>
                                <p class="heroDesc">Explore the active side of the world around you.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="span5">
                                <h1>Track</h1>
                                <p class="heroDesc">Keep tabs on frequency and personal bests.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest2.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="span5">
                                <h1>Conquer</h1>
                                <p class="heroDesc">Earn points and awards for everything you do in your active life.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest3.png" />
                            </div>
                        </div>
                    </div>
                    <!-- Carousel nav -->


                </div>
            </div> <!-- /asPhone -->

Javascript へのリンクは次のとおりです: Twitter Bootstrap Carousel JS

どんな助けでも大歓迎です！

4

2 に答える 2

5

carouselIDの代わりにクラスを使用してカルーセルにアクセスできます。このようにして、1つのコントロールで複数のカルーセルを処理できます。

テンプレートに追加のコントロールボタンを追加します

<a href="#" class="btn">Next</a>

そして、クリックイベントをこのボタンにバインドして、カルーセルを制御します

$('.btn').on('click', function(e) {
  e.preventDefault()
  $('.carousel').carousel('next')
})

同じことがprevコントロールにも当てはまります。詳細については、ドキュメントをご覧ください。

于 2012-10-15T20:13:15.567 に答える
1

残念ながら、これは部分的な解決策です。その理由は、トリガーされたイベントから物事がどの方向に向かっているのかを理解する方法が見えないからです。

$('#walkThrough').carousel({
  interval: 5000 // Slide every 5 seconds
});

$('#walkThrough-2').carousel({
  interval: false // This one does not slide on its own
});

$('#walkThrough').bind('slide', function() {
  $('#walkThrough-2').carousel('next');
});
于 2012-10-15T20:22:49.107 に答える