Question

我只是在学习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

非常感谢任何帮助！

Answer 1

您可以使用班级carousel而非他们的ID访问轮播。通过这种方式，您可以使用一个控件处理多个轮播。

为模板添加额外的控制按钮

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

将点击事件绑定到此按钮以控制轮播

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

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

Answer 2

遗憾的是，这是一个部分解决方案。原因是我无法从触发的事件中找出事情的方向。

$('#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');
});

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

2 个答案: