8

我只是在学习 javascript，所以请耐心等待。我正在尝试使用相同的控件在引导程序中启动两个轮播。

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

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

向您的模板添加一个额外的控制按钮

<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 回答