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

发布时间：2020-12-18 00:22:05 所属栏目：安全来源：网络整理

导读：我刚刚学习 javascript,所以请在这里忍受我.我正在尝试使用相同的控件在bootstrap中启动两个轮播. 它现在的设置方式,包含轮播ID的href标签控制着每个轮播.任何人都有关于如何使用相同的控件将两者连接在一起的建议,并进这是HTML： div id="asHero" div id="

我刚刚学习 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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!