使用一个控件将两个Twitter Bootstrap轮播链接在一起 [英] Link two Twitter Bootstrap carousels together using one control

问题描述

我只是在学习JavaScript，所以请在这里与我一起忍受。我正在尝试使用相同的控件在引导程序中启动两个轮播。

I'm just learning javascript so please bear with me here. I'm trying to initiate two carousels in bootstrap using the same control.

采用现在的设置方式，包含轮播ID的href标签控制着每个轮播。有人对如何使用相同的控件进行最少的修改就将它们链接在一起有任何建议吗？

The way it's setup right now, href tags containing the carousel's ID is controlling each carousel. Anyone have advice on how to link both together using the same control with minimal modifications?

以下是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

Here's a link to the Javascript: Twitter Bootstrap Carousel JS

任何帮助都会

推荐答案

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

You can access the carousels using their class carousel instead of their IDs. This way you can handle multiple carousels with one control.

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

Add an extra control button to your template

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

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

And bind a click event to this button to control the carousels

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

上一个控件。有关更多信息，请参见文档。

The same goes for the prev control. For more information have a look at the docs.

这篇关于使用一个控件将两个Twitter Bootstrap轮播链接在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！