一个页面上的多个引导程序传送带只能控制一个 [英] Multiple bootstrap carousels on one page, can only control one
本文介绍了一个页面上的多个引导程序传送带只能控制一个的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在视图中一次加载了动态数量的旋转木马，但我只能滚动显示第一个旋转木马。我怎样才能控制所有加载的？一次只能看到一个旋转木马，其他的则隐藏起来。
$（'＃myCarousel'）。carousel（{
interval：10000
}）
$（'。carousel .item'）。each（function（）{
var next = $（this）.next（）;
if（！next.length）{
next = $（this）.siblings（'：first'）;
}
next.children（'：first-child'）。clone（）。appendTo（$（this） ）;
}）;
Html：
< div class =draft postsid =draft_1>< div class ='container'>
< div class ='col-md-12'>
< div class ='carousel slide'id ='myCarousel'>
< div class ='carousel-inner'>
< div class ='item active'>
< div class ='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
< div id ='border'>
< a href ='＃'>< / a>
< div class ='text-center'>
修正
< / div>
< div class ='view-draft-title'>
< h2>我正在编辑htis草稿< / h2>
< p contenteditable =true> < / p为H.
< / div>
< div class ='view-draft-body'>
< h2>我正在编辑htis草稿< / h2>
< p contenteditable =true> < / p为H.
< / div>
< / div>
< / div>
< / div>
< div class ='item'>
< div class ='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
< div id ='border'>
< a href ='＃'>< / a>
< div class ='text-center'>
原始
< / div>
< div class ='view-draft-title'>
< h1>这是一个新的草稿< / h1>
< / div>
< div class ='view-draft-body'>
< h2>点击W< span style =color：rgb（51,51,51）; font-family：'Lucida Grande'，'Lucida Sans Unicode'，'Lucida Sans'，日内瓦，Verdana ，sans-serif; font-size：14px; line-height：25px;> $（'＃post-body textarea'）.val（content）& nbsp;< / span>< span style = line-height：1.1;>& nbsp;编辑< / span>< / h2>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< i class ='glyphicon glyphicon-chevron-left'>< / i>
< / a>
< a class ='right carousel-control'data-slide ='next'href ='draft_1＃myCarousel'>
< i class ='glyphicon glyphicon-chevron-right'>< / i>
< / a>
< / div>
< / div>
< / div>
< div class =draft postsid =draft_2>< div class ='container'>
< div class ='col-md-12'>
< div class ='carousel slide'id ='myCarousel'>
< div class ='carousel-inner'>
< div class ='item active'>
< div class ='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
< div id ='border'>
< a href ='＃'>< / a>
< div class ='text-center'>
修正
< / div>
< div class ='view-draft-title'>
< h2>草稿2编辑< / h2>后
< / div>
< div class ='view-draft-body'>
< h2>草稿2编辑< / h2>后
< / div>
< / div>
< / div>
< / div>
< div class ='item'>
< div class ='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
< div id ='border'>
< a href ='＃'>< / a>
< div class ='text-center'>
原始
< / div>
< div class ='view-draft-title'>
< h1> Number 2< / h1>
< / div>
< div class ='view-draft-body'>
< h2>编辑前的草稿2< / h2>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< i class ='glyphicon glyphicon-chevron-left'>< / i>
< / a>
< a class ='right carousel-control'data-slide ='next'href ='draft_2＃myCarousel'>
< i class ='glyphicon glyphicon-chevron-right'>< / i>
解决方案
您有两个ID为#myCarousel的轮播。 p>
其中一个应该改为不同的id（例如＃carousel2）。然后关联的控件应该更新为href =＃carousel2
一般而言，您应该每页只使用一次ID。
I have a dynamic amount of carousels loaded at once in a view, but I can only scroll through the first carousel rendered. How can I control all of the ones loaded? Only one carousel is able to be viewed at once, the others are hidden.
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
});
Html:
<div class="draft posts" id="draft_1"><div class='container'>
<div class='col-md-12'>
<div class='carousel slide' id='myCarousel'>
<div class='carousel-inner'>
<div class='item active'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Revised
</div>
<div class='view-draft-title'>
<h2>I'm editing htis draft</h2>
<p contenteditable="true"> </p>
</div>
<div class='view-draft-body'>
<h2>I'm editing htis draft</h2>
<p contenteditable="true"> </p>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Original
</div>
<div class='view-draft-title'>
<h1>This is Tsteting new draft</h1>
</div>
<div class='view-draft-body'>
<h2>Click to W<span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; font-size: 14px; line-height: 25px;">$('#post-body textarea').val(content) </span><span style="line-height: 1.1;"> editing</span></h2>
</div>
</div>
</div>
</div>
</div>
</div>
<a class='left carousel-control' data-slide='prev' href='draft_1 #myCarousel'>
<i class='glyphicon glyphicon-chevron-left'></i>
</a>
<a class='right carousel-control' data-slide='next' href='draft_1 #myCarousel'>
<i class='glyphicon glyphicon-chevron-right'></i>
</a>
</div>
</div>
</div>
<div class="draft posts" id="draft_2"><div class='container'>
<div class='col-md-12'>
<div class='carousel slide' id='myCarousel'>
<div class='carousel-inner'>
<div class='item active'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Revised
</div>
<div class='view-draft-title'>
<h2>Draft 2 After edit</h2>
</div>
<div class='view-draft-body'>
<h2>Draft 2 After edit</h2>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Original
</div>
<div class='view-draft-title'>
<h1>Number 2</h1>
</div>
<div class='view-draft-body'>
<h2>Draft 2 before edit</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<a class='left carousel-control' data-slide='prev' href='draft_2 #myCarousel'>
<i class='glyphicon glyphicon-chevron-left'></i>
</a>
<a class='right carousel-control' data-slide='next' href='draft_2 #myCarousel'>
<i class='glyphicon glyphicon-chevron-right'></i>
解决方案
You have two carousels with id #myCarousel.
One of these should be changed to a different id (#carousel2, for instance). Then the associated controls should be updated to have href="#carousel2"
In general, you should only ever use an ID once per page.
这篇关于一个页面上的多个引导程序传送带只能控制一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
