twitter-bootstrap - 使用一个控件将两个Twitter Bootstrap轮播链接在一起

我只是在学习javascript，所以请在这里忍受。我正在尝试使用相同的控件在 bootstrap 中启动两个轮播。

现在设置的方式是，包含轮播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

任何帮助将不胜感激!

最佳答案

您可以使用轮播类carousel而不是其ID来访问轮播。这样，您可以使用一个控件处理多个轮播。

在模板中添加一个额外的控制按钮

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

并将click事件绑定(bind)到此按钮以控制轮播

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

prev控件也是如此。有关更多信息，请查看docs。

关于twitter-bootstrap - 使用一个控件将两个Twitter Bootstrap轮播链接在一起，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12902592/