我在视图中一次性加载了动态数量的轮播,但我只能滚动浏览渲染的第一个轮播。我怎样才能控制所有加载的?一次只能查看一个轮播,其他轮播被隐藏。
$('#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>
您有两个 ID 为 #myCarousel 的轮播。
其中之一应更改为不同的 id(例如#carousel2)。然后关联的控件应更新为 href="#carousel2"
一般来说,每个页面只应该使用一个 ID 一次。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)