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

任何帮助将不胜感激！

解决方法

您可以使用他们的班级轮播而不是他们的ID来访问轮播.这样您就可以使用一个控件处理多个轮播.

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

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

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

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

对于prev控制也是如此.有关更多信息,请查看docs.

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

解决方法

猜你在找的Bootstrap相关文章